在vue 2.9.6中，搭建vue-cli腳手架的流程是這樣的：
首先 全局安裝vue-cli，在cmd中輸入命令:
npm install --global vue-cli
安裝成功： 
安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。 
然后就可以構建項目了，依次輸入命令：
vue init webpack “名稱”cd 名稱（進入到創建的項目中）npm install (安裝項目的依賴)npm run dev (啟動項目)
然后在瀏覽器中輸入localhost:8080就可以啟動我們創建的項目啦
此時，我們在 package.json可以看到的版本信息： 
構建好的項目目錄是這樣的： 
Vue CLI 3.0搭建
如今，官方文檔已經升級3.0，在 vue-cli 3.0中，我們需要重新配置：
如果你已經安裝了vue 2.9.6 的話，則需要先將其刪除：指令為：npm uninstall -g vue-cli 
提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推薦）。 
第二步：更新Vue-cli 指令：npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli
（這里我用的 cnpm 安裝的，國內的淘寶鏡像速度會快許多…），安裝成功則顯示： 
安裝之后，記得查看版本號：查看版本（是否安裝成功）：vue -V (大寫的V) 
接下來就可以構建項目了，輸入指令：vue create test （test為項目名）；
與 2.0 不同的是這里不再是選擇模板，而是預設 presets 
默認配置
- 選擇 [默認] 將直接開始安裝
自定義配置
- 選擇 [自定義]
方向鍵上下移動，空格選中，Enter確定，自定義配置中，您將會看到這些配置項：
自定義細節配置
- 是否使用class風格的組件語法
- 是否使用babel做轉義
- 選擇CSS預處理類型
- 選擇語法檢測規范
- 選擇 保存時檢查 / 提交時檢查
- 選擇配置信息存放位置，單獨存放或者並入package.json
- 是否保存當前預設，下次構建無需再次配置
完成安裝 
3.0 的基本目錄結構相對 2.0 精簡了不少 （應該說是最精簡的目錄了～） 
public相當於原來的static，里面的index.html是項目的入口
src同以前一樣
cli3.0沒有build和config了，
想要配置的話，需要在項目根目錄下創建vue.config.js文件
(反正官方文檔這么說~)
再看一下 src 里面的目錄結構： 
配置文件去哪了？
之前的build和config文件夾不見了，那么應該如何配置 如webpack等的配那？
只需要在項目的根目錄下新建 vue.config.js 文件（是根目錄，不是src目錄）
語法
module.exports = {
// 基本路徑 baseUrl: '/', // 輸出文件目錄 outputDir: 'dist', // eslint-loader 是否在保存的時候檢查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, // vue-loader 配置項 // https://vue-loader.vuejs.org/en/options.html vueLoader: {}, // 生產環境是否生成 sourceMap 文件 productionSourceMap: true, // css相關配置 css: { // 是否使用css分離插件 ExtractTextPlugin extract: true, // 開啟 CSS source maps? sourceMap: false, // css預設器配置項 loaderOptions: {}, // 啟用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // 是否啟用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode dll: false, // PWA 插件相關配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相關配置 devServer: { open: process.platform === 'darwin', host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 設置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } }
例如： 
在package.json中自行查看配置的詳細信息， 
然后輸入指令運行項目即可： npm run serve ——運行指令 npm run lint ——語法檢測&自行修復
成功跑起來之后是這樣的： 
npm install @vue/cli-init -g
vue-cli3腳手架/單文件/環境搭建。vue3.x版本相對於2.x版本做了許多地方的優化,個人總結主要還是使用上使開發者更加一目了然,配置起來也更加的方便,減少了各種webpack里面的loader的配置.下面一起看一下,3.x版本該如何從搭建到配置再到開發的一個過程:
如果你已經搭建好了,請前往vue-config.js(封裝了2.x的webpack配置)
一,安裝
1.如果電腦之前有安裝1.x或者2.x的先進行卸載
npm uninstall vue-cli -g
2.就是安裝3.x,安裝完了執行 vue -V 即可查看版本號.
npm install -g @vue/cli
# OR
yarn global add @vue/cli
3.單文件運行安裝(這點比較方面,就是單個的vue文件可以像html那樣直接運行了)
npm install -g @vue/cli-service-global
二,先看一下單文件如何運行的,最后再深入了解腳手架
1.我們隨便找一個目錄,新建一個app.vue文件
2.打開命令行,執行如下命令(任意一個,多個文件可以制定某一個*.vue文件)
vue serve app.vue
or
vue serve
3.運行之后,hello world完美展示,相對來說,比以前的版本更加的簡單粗暴,無須引入任何代碼,即可像node一樣運行*.vue文件
三,創建3.x腳手架
在3.x中有兩種腳手架的創建方式,一種就是通過命令行,另外一種則是通過可視化工具,無論哪一種都比較方便,我們先來看第一種:
1.命令行方式構建:
vue create demo-vue
這時候會發現有一個可選項,可一通過鍵盤上下鍵控制,一個是默認配置,一個是手動配置
默認的配置里面基本什么內容都沒有,只是一個簡單的框架,路由,vuex等都需要自己手動去裝的,我們這里選擇手動安裝,
進入是如下界面,為了方便大家理解,這里進行了注釋:
我們也是通過上下鍵進行選擇,確定選擇的插件就按下空格,再次確定就是取消
根據自己的需要選擇安裝,選完之后回車就行,再往后就是跟2.x的執行步驟差不多了(有是否使用scss語句/less,是否執行代碼檢查等等),你也可以一直回車,到最后會讓你選擇是否保存方案,下次再次創建就不用選擇了,十分方便.
舉個例子:
選擇scss
選擇檢查只提示錯誤
是否保存以后的預設方案
然后就創建完成了,我們一起看下目錄
最后,cd到這個項目的文件夾,執行啟動命令:
npm run serve
# OR
yarn serve
2.vue ui 可視化創建
這個來說更加的簡單,感覺認識字就行了
隨便找個文件夾,執行 vue ui:
到這基本搭建完成,還有一個巨大的好處，更加方便管理vue項目，看下圖，你就懂了
學會了請前往 vue-config.js(封裝了2.x的webpack配置),准備實戰項目