全域性安裝vue-cli:

npm install -g @vue/cli

或者

yarn global add @vue/cli

檢測安裝:vue -V
在使用vue的時候我們需要先下載對應外掛Vue-cli，有兩種方式可以在控制檯或者終端安裝npm install -g @vue/cli 或者 yarn global add @vue/cli 安裝好以後我們就可以檢查型號![可以看到我們下載的型號是4.5.3]

此時我們就安裝成功了需要的外掛接下來我們可以在終端裡建立專案了。下面我們就不在截圖，直接用文字表述了，可以直接按照下面的步驟直接在終端輸入。（終端直接右擊選擇在終端開啟會比較方便哦）

1. vue create 專案名稱
2. 按向下的箭頭選擇 Manually select features
3. 一般情況下可以選擇（用空格控制選擇與否） Choose Vue version ， Babel ， CSS Pre-processors ， Linter / Formatter
4. 2.x
5. Sass/SCSS (with node-sass)
6. ESLint + Standard config
7. Lint and fix on commit
8. In dedicated config files 選擇y
9. 最後一步儲存一個預設的名字，然後回車安裝
   此時會產生很多的檔案，我們一般在src資料夾裡程式設計，其他這裡就不過多介紹，需要的可以自行百度 ，
   如圖所示，在src資料夾裡會有兩個常用的，components資料夾和App.vue檔案，在components資料夾裡我們可以寫子元件，App.vue檔案會直接與index.html檔案中的div的id為app的節點相連線，在引用時候會直接把模板內容替換掉該div。
   vue create 專案名稱

這裡如果你是第一次使用腳手架進行專案建立的話，是隻有兩項提示。

第一項是預設配置，我們一般選擇第二項自定義配置進行專案構建。

我們可以自由的選擇哪些配置，按鍵盤上下鍵進行選中，安裝。

選中哪一個，通過鍵盤空格鍵確定，所有的都選擇完畢後，按鍵盤的Enter鍵進行下一步。

需要注意的是：模板建立的時候會詢問需要使用EsLint來標準化我們的程式碼規範。

1. 關閉eslint
   ​ 如果當前專案使用了eslint，並且需要關閉。需要手動建立vue.config.js檔案，採用如下程式碼：

module.exports = {
    devServer: {
        overlay: {
          warnings: false,
          errors: false
        }
    },
    lintOnSave:false //直接關閉eslint檢查
}
 

2. proxy代理配置

devServer: {
	 open:true, //自動開啟瀏覽器
     port:8000, //隨便改埠號
     proxy: {     //  配置代理，解決前端瀏覽器的跨域問題
         '/api': {
             target: 'https://*.*.com',  //目標請求的域名地址
             host: '*.*.com',             
             changeOrigin:true   //是否改變
              pathRewrite:{      //重寫地址
                "^/api":""
              }
         }
     }
}

3. alias別名配置

configureWebpack: {
    resolve: {
        alias: {
            'assets': '@/assets',
            'con': '@/components',
            'views': '@/views',
        }
    }
}

4. 打包路徑配置

// 基本路徑
publicPath: '/vue-demo'

走別人不曾走過的路，才能看到別人不曾看到的風景。