今天給各位分享vue腳手架3創(chuàng)建項(xiàng)目的知識(shí)，其中也會(huì)對(duì)vue腳手架新建項(xiàng)目進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、使用vue腳手架創(chuàng)建Vue項(xiàng)目并引入bootstrap-vue
• 2、vue腳手架2.0和3.0創(chuàng)建項(xiàng)目的區(qū)別？
• 3、vue項(xiàng)目完整搭建步驟
• 4、Vue腳手架
• 5、構(gòu)建實(shí)用VUE3項(xiàng)目

使用vue腳手架創(chuàng)建Vue項(xiàng)目并引入bootstrap-vue

1.Module build failed: Error: ENOENT: no such file or directory, open '包路徑\bootstrap-vue\node_modules\core-js\modules\es.array.iterator.js'

2.Error: ENOENT: no such file or directory, open 'D:\ahao\studyPath\bootstrap-vue\node_modules\lodash\lodash.js'

3.VUE中使用BootstrapVue圖片b-img標(biāo)簽路徑顯示不出圖片問(wèn)題

新建 vue.config.js ;安裝 npm i vue-cli-plugin-bootstrap-vue ;配置vue.config.js后重新執(zhí)行npm run serve

vue腳手架2.0和3.0創(chuàng)建項(xiàng)目的區(qū)別？

一、生成項(xiàng)目命令

安裝3.x版本的Vue腳手架： npm install -g @vue/cli ,創(chuàng)建Vue項(xiàng)目命令： vue create 項(xiàng)目名稱 或基于ui界面創(chuàng)建Vue項(xiàng)目,命令： vue ui

基于2.x的舊模板，創(chuàng)建Vue項(xiàng)目 npm install -g @vue/cli-init , vue init webpack 項(xiàng)目名稱

二、目錄的區(qū)別

3.0版本根目錄新增了 babel.config.js和.browserslistrc public文件夾

src文件夾中多了views文件夾，相比2.0，在index.js變?yōu)榱藃outer.js

2.0版本相比3.0版本 有build和config文件夾等，src文件夾中有router文件夾，里面有index.js

vue項(xiàng)目完整搭建步驟

為了讓一些不太清楚搭建前端項(xiàng)目的小白，更快上手。今天我將一步一步帶領(lǐng)你們進(jìn)行前端項(xiàng)目的搭建。前端開發(fā)中需要用到框架，那vue作為三大框架主流之一，在工作中很常用。所以就以vue為例。

下載并安裝node

下載地址為：

在 nodejs官網(wǎng)下載最新版穩(wěn)定版的node.js安裝，自帶了npm工具 ,推薦下載左邊的。

檢查node是否安裝成功

為了更快安裝，可以使用淘寶的鏡像：

在終端輸入以下命令：

檢測(cè)cnpm是否安裝成功

vue-cli是vue腳手架工具，方便打包，部署，測(cè)試等。

進(jìn)入你的項(xiàng)目目錄，創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack 項(xiàng)目名

進(jìn)入項(xiàng)目

安裝依賴

此時(shí)項(xiàng)目中會(huì)多了一個(gè)node_modules

啟動(dòng)成功

Vue腳手架

在沒(méi)有Vue腳手架的時(shí)候，我們需要手動(dòng)搭建webpack項(xiàng)目、手動(dòng)去配置vue，現(xiàn)在有了Vue腳手架，我們就可以通過(guò)命令行的形式快速生成vue項(xiàng)目的基礎(chǔ)架構(gòu)。其官網(wǎng)地址為：

安裝 3.x 版本的 Vue 腳手架。

輸入 vue -V 如果出現(xiàn)版本號(hào)，就說(shuō)明安裝成功。

腳手架安裝成功之后，就可以通過(guò)腳手架創(chuàng)建vue項(xiàng)目了。

通過(guò)上面腳手架創(chuàng)建的Vue項(xiàng)目，使用 npm run serve 命令之后，打印如下：

使用 npm run serve 命令并不會(huì)自動(dòng)打開瀏覽器，下面我們修改端口號(hào)，并且讓執(zhí)行命令之后自動(dòng)打開瀏覽器。

注意： 不推薦使用這種配置方式。因?yàn)?package.json 主要用來(lái)管理包的配置信息，為了方便維護(hù)，推薦將 vue 腳手架相關(guān)的配置，單獨(dú)定義到 vue.config.js 配置文件中。

總結(jié) ：至此，使用腳手架創(chuàng)建項(xiàng)目的流程就完成了，如果想要把項(xiàng)目拷貝給別人，需要先把項(xiàng)目的 node_modules 文件夾刪除，對(duì)方拿到項(xiàng)目之后，首先要cd到項(xiàng)目目錄，然后執(zhí)行 npm install 安裝所有依賴項(xiàng)，然后再執(zhí)行 npm run serve 就可以把項(xiàng)目跑起來(lái)了。如果想要再給項(xiàng)目添加新的依賴，可以cd到項(xiàng)目目錄，然后執(zhí)行 vue ui 打開GUI，在可視化面板中就可以給項(xiàng)目添加新的依賴了。

構(gòu)建實(shí)用VUE3項(xiàng)目

還沒(méi)用幾天VUE，就到3了，本文旨在記錄構(gòu)建一個(gè)實(shí)用項(xiàng)目模板昂。

1、自然是將VUE-CLI升級(jí)到最新版本啦（卸載舊的，安裝zhui新的）

npm uninstall -g vue-cli

npm install -g @vue/cli

你要是想看看腳手架的版本，那敲這個(gè)

vue --version

2、構(gòu)建你的項(xiàng)目吧

vue create myproject

進(jìn)入配置的時(shí)候問(wèn)你愿不愿意，你打YES就好

還有就是，既然想要VUE3的，記得選VUE3就好

到了這兒，一個(gè)原始的項(xiàng)目就有啦。

3、在項(xiàng)目目錄中，建一個(gè)名叫vue.config.js的文件，并且在這個(gè)文件里導(dǎo)出一個(gè)對(duì)象。至于這個(gè)對(duì)象里的選項(xiàng)和配的值，那就又可以寫一篇了

4、配置路由（和子路由）

1）安裝好路由插件? ? ?cnpm i vue-router@next -D

2）在src目錄下創(chuàng)建?router/index.js?

3）在根目錄的main.js里面引入路由??import router from './router'

4)? ?在Vue對(duì)象中加入router的配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '../views/Login.vue'

Vue.use(VueRouter)

? const routes = [

? {

? ? path: '/',

? ? redirect: '/login'

? },

? {

? ? path: '/login',

? ? name: 'Login',

? ? component: Login

? },

? {

? ? path: '/',

? ? component: resolve = require(['../views/Index.vue'], resolve),

? ? redirect: '/home',

? ? children: [

? ? ? {

? ? ? ? path: 'home',

? ? ? ? name: 'home',

? ? ? ? component: resolve = require(['../views/home/Home.vue'], resolve),

? ? ? ? meta: { title: '首頁(yè)'}

? ? ? },

? ? ? {

? ? ? ? path: '/programCard',

? ? ? ? name: 'programCard',

? ? ? ? component: resolve = require(['../views/programCard/card.vue'], resolve),

? ? ? ? meta: { title: '路由1'}

? ? ? }

? ? ]

? }

]

const router = new VueRouter({

? mode: 'hash',

? base: process.env.BASE_URL,

? routes

})

export default router

5、安裝VUEX并使用

1)安裝vuex? cnpm i? vuex@next -D

2）在src目錄下創(chuàng)建?store/index.js?

3）在根目錄的main.js里面引入? import store from './store'

4)? ?在main.js里加入store的配置

6、配置axios

1)? ?安裝vuex? cnpm i? axios@next -D

2)? ?在src目錄建立api/request.js,并在其中引入axios? ? ? ?import axios? from 'axios'

在request.js中創(chuàng)建axios實(shí)例

添加請(qǐng)求攔截器和響應(yīng)攔截器

再將實(shí)例導(dǎo)出export

3)在src目錄建立api/index.js,引用axios實(shí)例，并統(tǒng)一定義請(qǐng)求函數(shù)

7、在src下建立views目錄和路由子目錄home/Home.vue

8、在assets目錄增加css 、iconfont、images、js目錄，存放資源

9、根目錄下建立static\global.js

定義常量 const API_ROOT='127.0.0.1:8081'

建立對(duì)象window.global={

url:{

apiUrl:"http://"+API_ROOT+"/"

}

}

關(guān)于vue腳手架3創(chuàng)建項(xiàng)目和vue腳手架新建項(xiàng)目的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。