1. Node 版本要求

   Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。

2. 重新安裝vue-cli，將是最新的vue-cli版本

   npm install -g @vue/cli

3. 安裝完後使用命令：

   vue --version

   檢視安裝的版本號，以及是否安裝成功

4. 建立專案：
   

   vue create hello-world
5. 接下來，是在知乎上學習到的知識，引用知乎的圖

6. default: 預設配置，只有bable和eslint

   Manually select features: 手動配置
    

7. Babel：將ES6編譯成ES5

   TypeScript：JS超集，主要是型別檢查

   Progressive Web App（PWA）Support：漸進式WEB應用支援

   Router：路由

   Vuex：狀態管理

   Linter/ Formatter：程式碼檢查工具

   CSS Pre-processors：css預編譯 (稍後會對這裡進行配置)

   Unit Testing：單元測試，開發過程中前端對程式碼進行自執行測試

   E2E Testing: 端對端測試，屬於黑盒測試，通過編寫測試用例，自動化模擬使用者操作，確保元件間通訊正常，程式流資料傳遞如預期。
   

    

    

    

8. 使用什麼css預編譯器：
   
9. 程式碼檢查工具：
   
   

   tslint: typescript格式驗證工具（如果前面選擇了TypeScript會有這一項）

   eslint w...: 只進行報錯提醒；（如果還沒熟悉eslint,推薦使用此模式）

   eslint + A...: 不嚴謹模式；

   eslint + S...: 正常模式

   eslint + P...: 嚴格模式；

10. 程式碼檢查方式：（我都選了）
    
11. 所有的依賴目錄的配置放置的位置（一般都是package.json）
    
12. 在這裡，專案的建立就算是完成了。
13. 但是，vue-cli3與2的版本有很大區別，其中之前的build目錄取消，也就沒有了我們之前用的配置檔案，那麼我們需要在vue-cli3專案手動新增vue.config.js(在根目錄下)
14. 配置vue.config.js:
    

    // vue.config.js
    const path = require('path')
    const webpack = require('webpack')
    module.exports = {
      // baseUrl從vue cli 3.3起已經棄用了，用publicPath來代替
      publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/', // 部署應用包時的基本URL(這裡可以看一下官方說明)
      outputDir: 'dist', // 打包時生成的生產環境構建穩健的目錄
      assetsDir: 'static', // 放置生成的靜態資源的目錄
      filenameHashing: true,
      lintOnSave: true, // eslint-loader會將lint錯誤輸出為編譯警告
      productionSourceMap: false, // 如果你不需要生產環境的source map，可以將其設定為false，以加速生產環境的構建
      configureWebpack: {
        // 簡單/基礎配置，比如引入一個新外掛
        plugins: []
      },
      chainWebpack: config => {
        // 鏈式配置
      },
      css: {
        // css預設器配置項
        loaderOptions: {
          css: {
     
          },
          postcss: {
     
          }
        }
      },
      devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: null,
        // proxy: {
        //     '/api': {
        //         target: '<url>',
        //         ws: true,
        //         changOrigin: true
        //     }
        // },
        before: app => {}
      },
      // 第三方外掛配置
      pluginOptions: {}
    }

15. 專案的目錄的參考：
    ### 專案目錄結構
    ├── public // 靜態資源
    ├── src // 原始碼
    │ ├── api // 所有請求
    │ ├── assets // 主題 字型等靜態資源
    │ ├── components // 全域性公用元件
    │ ├── models // 實體類
    │ ├── router // 路由及路由配置相關
    │ ├── store // 全域性 store管理
    │ ├── utils // 全域性公用方法
    │ ├── pages // view
    │ ├── App.vue // 入口頁面
    │ ├── main.js // 入口 載入元件 初始化等
    ├── tests // jest測試
    ├── .eslintrc.js // eslint配置
    └── package.json
16. Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全域性安裝一個橋接工具：
    

    npm install -g @vue/cli-init
    # `vue init` 的執行效果將會跟 `[email protected]` 相同
    vue init webpack my-project

17. 接下來就是執行專案了：
    

    cd hellow-world
    npm run serve

     

&n