Vue集成項目一般是用vue-cl腳手架來創(chuàng)建纵朋，也可以偷懶用別人建好的項目自己拷貝一份做葵。在創(chuàng)建項目時Vue-cli的版本不同創(chuàng)建方式也不同窑业，為以后創(chuàng)建項目時有個參照（畢竟不是經常創(chuàng)建項目）撤嫩，記錄此過程廉侧。
前期準備
1咽白、系統中必須要安裝Node.js啤握，下載地址：
英文網站：https://nodejs.org/en/
中文網站：http://nodejs.cn/download/
可以根據個人需要下載LTS版本或Current版本，網站推薦下載LTS版晶框。Node安裝成功后排抬，在系統命令運行：node -v，將返回Node的版本信息授段，如：v10.13.0
2、安裝Vue-cli腳手架
2.1侵贵、安裝Vue-cli?v2(v2.9.6)
運行命令 npm install vue-cli -g届搁，注意-g是全局安裝，這樣安裝后在命令行才能運行Vue對應的命令窍育。它一般安裝在nodejs對應的文件夾中（如果沒有修改node.js的安裝路徑卡睦，默認為：C:\Program Files\nodejs)，它包括以下命令程序
安裝成功后在命令行運行命令：vue -V漱抓，注意參數V是大寫字母V表锻，返回正常的版本信息說明安裝成功，如返回v2.9.6乞娄，安裝中出現錯誤瞬逊，要多試幾次。
2.2?安裝Vue-vli v3(v3.11.0)
運行命令?npm install @vue/cli -g仪或，注意-g是全局安裝确镊，這樣安裝后在命令行才能運行Vue對應的命令。
安裝成功后在命令行運行命令：vue -V范删，注意參數V是大寫字母V蕾域，返回正常的版本信息說明安裝成功，如返回v3.11.0
運行腳手架生成集成項目代碼
1到旦、運行 Vue-cli v2.9.6?腳手架命令生成集成項目代碼
npm init <template-name> <project-name>束铭，例：vue init webpack sell廓块。
template-name為項目結構模板，有：webpack契沫、webpack-simple、browserify昔汉、browserify-simple懈万、pwa、simple 6類靶病，選項其中一類項目結構就使用它來創(chuàng)建会通，之后的開發(fā)、調度和打包都使用此類對應的架構娄周。
project-name為項目名涕侈，名稱用英文字母，其中不能出現大寫字母煤辨。運行過程系統會下載template-name對應的模板裳涛，然后依此：
a）、Project name (sell)?項目名稱
b）众辨、Project description (A Vue.js project)?項目描述
c）端三、Author (xxx<xxx.dd.com>)?默認使用git設置的用戶名和email
d）、Vue build (Use arrow keys）Vue的打包推薦選擇第一項 Runtime + Compiler: recommended for most users
e）鹃彻、Install?Vue-router? (Y/n)?是否安裝Vue的路由郊闯，這個必須安裝
f）、Use?ESLint to lint your code? (Y/n)?使用ESLint來約束你的代碼結構蛛株，如果不熟悉团赁，選擇 n；如果熟悉或想學習谨履，選擇 y?安裝它欢摄。友情提示：對于初次學習它的同學，代碼的錯誤數會讓你產生放棄學習VueＬ敕剧浸！不過熟悉后就好多了，好多公司現在都要求使用它矗钟，還是強烈要求熟悉它唆香。
g）、Pick an ESLint preset (Use arrow keys)?選擇一種ESLint配置方案吨艇，一般默認選擇第一個 Standard (https://github.com/standard/standard)
h）躬它、Set up unit tests (Y/n)?設置單元測試，選擇 n东涡，如果選擇?y?的話冯吓，在下一步要求選擇測試模板倘待。
i）、Setup e2e tests with Nightwatch? (Y/n)?端到端自動化測試，功能強大典格，選擇 n 崎逃，熟悉它的話選擇 y
j）、Should we run 'npm install' for you after the project has been creater? (recommended) (Use arrow keys)?是否直接運行 npm install?安裝項目依賴啊奄，如果確定上面的信息無誤，選擇第一項掀潮；不確定選擇最后一項?No菇夸，I will handle that myself?；確定后手動運行?npm install?來安裝依賴仪吧，也可以使用?Yarn?方式來安裝庄新。
運行 npm install 或已經安裝的 cnpm install?安裝項目依賴包，成功后項目結構如下圖
用源代碼編輯器打開項目薯鼠，進行項目開發(fā)择诈。推薦編輯器?VSCode或WebStore。
項目開發(fā)調試：npm run dev人断，項目打包發(fā)布：npm run build
2吭从、運行Vue-cli 3.0?腳手架命令生成集成項目代碼
Vue-cli v3.0創(chuàng)建項目命令：vue create [options] <app-name>
例：vue create vue3demo，注意項目名稱不要出現大字字母恶迈，之后提示選擇
涩金？Please pick a preset：(Use arrow keys)?選擇配置方案
default (babel, eslint)
Manually select features
第一種只安裝babel，eslint暇仲，Router和Vuex都沒有安裝步做，如果對項目特熟悉會自己配置的話，選擇第一項奈附。
第二種手動按需選擇要安裝的組件全度。程序界面會提示：
（）Babel
（）TypeScript
（）Progressive Web App(PWA) Support
（）Router
（）Vuex
（）CSS Pre-processors
（）Linter / Formatter
（）Unit Testing
（）E2E Testing
提示按 a?鍵選擇全部，按 i?反選斥滤，按?空格?鍵選擇當前項将鸵，↑?↓ 光標鍵移動選擇
選擇好合適的項后按?回車鍵?安裝，成功后提示
另外一種使用：vue ui?啟動Web管理佑颇，在Web管理頁面中選擇創(chuàng)建新項目并進行配置顶掉。
成功創(chuàng)建后的項目目錄結構：
├─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
項目開發(fā)調試：```npm run serve```挑胸，項目打包發(fā)布：npm run build
另：Vue-cli 3.0?也支持Vue-cli 2.0方式?的?Vue?init webpack <project-name>方式來創(chuàng)建痒筒，創(chuàng)建后的項目和Vue-cli 2.0的項目結構一樣。如果提示不存在?Vue?init 簿透，需要運行命令安裝：npm install -g @vue/cli-init
注意：如果運行 npm install 安裝速度太慢移袍，可以考慮安裝淘寶的cnpm提高安裝速度或修改npm config?的registry為淘寶鏡像老充。安裝淘寶cnpm運行命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
設置npm config?的registry：
a）、運行命令：npm config set?registry https://registry.npm.taobao.org，成功后可以使用命令：npmm config get registry來驗證是否成功砸抛。
b）斤吐、運行命令：npm config edit，之后會自動用記事本打開.npmrc文件（此文件在c:\users\xxx下蜕煌，xxx是你登錄windows的用戶名），編輯或添加?registry=https://registry.npm.taobao.org伪冰，保存寨辩，也可以用上面的命令npmm config get registry?來驗證是否設置成功梢杭。
