Vue集成項(xiàng)目一般是用vue-cl腳手架來創(chuàng)建，也可以偷懶用別人建好的項(xiàng)目自己拷貝一份。在創(chuàng)建項(xiàng)目時(shí)Vue-cli的版本不同創(chuàng)建方式也不同，為以后創(chuàng)建項(xiàng)目時(shí)有個(gè)參照（畢竟不是經(jīng)常創(chuàng)建項(xiàng)目），記錄此過程。

前期準(zhǔn)備

1、系統(tǒng)中必須要安裝Node.js，下載地址：
英文網(wǎng)站：https://nodejs.org/en/
中文網(wǎng)站：http://nodejs.cn/download/

可以根據(jù)個(gè)人需要下載LTS版本或Current版本，網(wǎng)站推薦下載LTS版。Node安裝成功后，在系統(tǒng)命令運(yùn)行：node -v，將返回Node的版本信息，如：v10.13.0

2、安裝Vue-cli腳手架

2.1、安裝Vue-cli?v2(v2.9.6)

運(yùn)行命令 npm install vue-cli -g，注意-g是全局安裝，這樣安裝后在命令行才能運(yùn)行Vue對(duì)應(yīng)的命令。它一般安裝在nodejs對(duì)應(yīng)的文件夾中（如果沒有修改node.js的安裝路徑，默認(rèn)為：C:\Program Files\nodejs)，它包括以下命令程序

安裝成功后在命令行運(yùn)行命令：vue -V，注意參數(shù)V是大寫字母V，返回正常的版本信息說明安裝成功，如返回v2.9.6，安裝中出現(xiàn)錯(cuò)誤，要多試幾次。

2.2?安裝Vue-vli v3(v3.11.0)

運(yùn)行命令?npm install @vue/cli -g，注意-g是全局安裝，這樣安裝后在命令行才能運(yùn)行Vue對(duì)應(yīng)的命令。

安裝成功后在命令行運(yùn)行命令：vue -V，注意參數(shù)V是大寫字母V，返回正常的版本信息說明安裝成功，如返回v3.11.0

運(yùn)行腳手架生成集成項(xiàng)目代碼

1、運(yùn)行 Vue-cli v2.9.6?腳手架命令生成集成項(xiàng)目代碼

npm init <template-name> <project-name>，例：vue init webpack sell。

template-name為項(xiàng)目結(jié)構(gòu)模板，有：webpack、webpack-simple、browserify、browserify-simple、pwa、simple 6類，選項(xiàng)其中一類項(xiàng)目結(jié)構(gòu)就使用它來創(chuàng)建，之后的開發(fā)、調(diào)度和打包都使用此類對(duì)應(yīng)的架構(gòu)。

project-name為項(xiàng)目名，名稱用英文字母，其中不能出現(xiàn)大寫字母。運(yùn)行過程系統(tǒng)會(huì)下載template-name對(duì)應(yīng)的模板，然后依此：

a）、Project name (sell)?項(xiàng)目名稱

b）、Project description (A Vue.js project)?項(xiàng)目描述

c）、Author (xxx<xxx.dd.com>)?默認(rèn)使用git設(shè)置的用戶名和email

d）、Vue build (Use arrow keys）Vue的打包推薦選擇第一項(xiàng) Runtime + Compiler: recommended for most users

e）、Install?Vue-router? (Y/n)?是否安裝Vue的路由，這個(gè)必須安裝

f）、Use?ESLint to lint your code? (Y/n)?使用ESLint來約束你的代碼結(jié)構(gòu)，如果不熟悉，選擇 n；如果熟悉或想學(xué)習(xí)，選擇 y?安裝它。友情提示：對(duì)于初次學(xué)習(xí)它的同學(xué)，代碼的錯(cuò)誤數(shù)會(huì)讓你產(chǎn)生放棄學(xué)習(xí)Vue！！不過熟悉后就好多了，好多公司現(xiàn)在都要求使用它，還是強(qiáng)烈要求熟悉它。

g）、Pick an ESLint preset (Use arrow keys)?選擇一種ESLint配置方案，一般默認(rèn)選擇第一個(gè) Standard (https://github.com/standard/standard)

h）、Set up unit tests (Y/n)?設(shè)置單元測(cè)試，選擇 n，如果選擇?y?的話，在下一步要求選擇測(cè)試模板。

i）、Setup e2e tests with Nightwatch? (Y/n)?端到端自動(dòng)化測(cè)試，功能強(qiáng)大，選擇 n ，熟悉它的話選擇 y

j）、Should we run 'npm install' for you after the project has been creater? (recommended) (Use arrow keys)?是否直接運(yùn)行 npm install?安裝項(xiàng)目依賴，如果確定上面的信息無誤，選擇第一項(xiàng)；不確定選擇最后一項(xiàng)?No，I will handle that myself?；確定后手動(dòng)運(yùn)行?npm install?來安裝依賴，也可以使用?Yarn?方式來安裝。

運(yùn)行 npm install 或已經(jīng)安裝的 cnpm install?安裝項(xiàng)目依賴包，成功后項(xiàng)目結(jié)構(gòu)如下圖

用源代碼編輯器打開項(xiàng)目，進(jìn)行項(xiàng)目開發(fā)。推薦編輯器?VSCode或WebStore。

項(xiàng)目開發(fā)調(diào)試：npm run dev，項(xiàng)目打包發(fā)布：npm run build

2、運(yùn)行Vue-cli 3.0?腳手架命令生成集成項(xiàng)目代碼

Vue-cli v3.0創(chuàng)建項(xiàng)目命令：vue create [options] <app-name>

例：vue create vue3demo，注意項(xiàng)目名稱不要出現(xiàn)大字字母，之后提示選擇

？Please pick a preset：(Use arrow keys)?選擇配置方案
default (babel, eslint)
Manually select features

第一種只安裝babel，eslint，Router和Vuex都沒有安裝，如果對(duì)項(xiàng)目特熟悉會(huì)自己配置的話，選擇第一項(xiàng)。

第二種手動(dòng)按需選擇要安裝的組件。程序界面會(huì)提示：

（）Babel
（）TypeScript
（）Progressive Web App(PWA) Support
（）Router
（）Vuex
（）CSS Pre-processors
（）Linter / Formatter
（）Unit Testing
（）E2E Testing

提示按 a?鍵選擇全部，按 i?反選，按?空格?鍵選擇當(dāng)前項(xiàng)，↑?↓ 光標(biāo)鍵移動(dòng)選擇

選擇好合適的項(xiàng)后按?回車鍵?安裝，成功后提示

另外一種使用：vue ui?啟動(dòng)Web管理，在Web管理頁(yè)面中選擇創(chuàng)建新項(xiàng)目并進(jìn)行配置。

成功創(chuàng)建后的項(xiàng)目目錄結(jié)構(gòu)：

├─node_modules
├─public
│? ? ? favicon.ico
│? ? ? index.html
│? ? ?
├─src
│? │? App.vue
│? │? main.js
│? │? router.js
│? │? store.js
│? │
│? ├─assets
│? │? ? ? logo.png
│? │? ? ?
│? ├─components
│? │? ? ? HelloWorld.vue
│? │? ? ?
│? └─views
│? ? ? ? ? About.vue
│? ? ? ? ? Home.vue
│? ? ? ? ?
│? .browserslistrc
│? .eslintrc.js
│? .gitignore
│? babel.config.js
│? dd.txt
│? package-lock.json
│? package.json
│? postcss.config.js
│? README.md

項(xiàng)目開發(fā)調(diào)試：```npm run serve```，項(xiàng)目打包發(fā)布：npm run build

另：Vue-cli 3.0?也支持Vue-cli 2.0方式?的?Vue?init webpack <project-name>方式來創(chuàng)建，創(chuàng)建后的項(xiàng)目和Vue-cli 2.0的項(xiàng)目結(jié)構(gòu)一樣。如果提示不存在?Vue?init ，需要運(yùn)行命令安裝：npm install -g @vue/cli-init

注意：如果運(yùn)行 npm install 安裝速度太慢，可以考慮安裝淘寶的cnpm提高安裝速度或修改npm config?的registry為淘寶鏡像。安裝淘寶cnpm運(yùn)行命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

設(shè)置npm config?的registry：

a）、運(yùn)行命令：npm config set?registry https://registry.npm.taobao.org，成功后可以使用命令：npmm config get registry來驗(yàn)證是否成功。

b）、運(yùn)行命令：npm config edit，之后會(huì)自動(dòng)用記事本打開.npmrc文件（此文件在c:\users\xxx下，xxx是你登錄windows的用戶名），編輯或添加?registry=https://registry.npm.taobao.org，保存，也可以用上面的命令npmm config get registry?來驗(yàn)證是否設(shè)置成功。