Vue cli3是一個互動式的專案腳手架。通過vue create可以快速搭建一個新專案，它包含了載入其它CLI外掛的核心服務，並且提供了一個針對絕大部分應用優化過的內部的webpack配置，專案內部的vue-cli-service 命令，提供 serve、build 和 inspect 命令。

vue/cli4+elementUi專案的搭建

1. node版本要求Node>=8.9，執行npm install @vue/cli -g命令，安裝vue-cli

2. 執行vue create projectName，建立vue專案，projectName是專案名

   vue-cli3支援Prompt(問詢)，根據詢問內容最終生成專案

   選擇手動配置還是預設配置，這裡選擇Manually select features(手動配置)

選擇專案需要新增的外掛

Babel：將ES6編譯ES5 Router：支援vue-router

Vuex：支援vuex CSS Pre-processors：支援css前處理器

Linter/Formatter：支援程式碼風格檢查和格式化

新增CSS Pre-processors後，需要選擇CSS前處理器

是否使用路由的history模式

選擇hash模式，也是預設模式，通過修改#號之後的值改變頁面路由，打包之後可以放到伺服器之後可以直接使用。history模式伺服器需要做額外的設定。

Eslint程式碼驗證規則

選擇在什麼階段進行程式碼檢測：選擇儲存時檢測，可以實時修改，不必等到提交時修改

Babel，Eslint等外掛的配置資訊，放在一個獨立的檔案下

3. vue-cli引入Element元件

   Element為vue-cli提供了Element外掛，vue add element

4. ajax請求

首先，需要配置環境變數

.env.development

# 開發環境
NODE_ENV='development'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''
 

.env.test

# 測試環境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

.env.production

# 生產環境
NODE_ENV='production'
VUE_APP_DEBUG='false'
VUE_APP_HTTP_HEADER={}
VUE_APP_HTTP_BASE_URL=''
VUE_APP_HTTP_NOAUTH_BASE_URL=''

axios配置

import axios from 'axios'
import { requestBefore, requestError, responseAfter, responseError } from './interceptors'

const http = axios.create({
  baseURL: process.env.VUE_APP_HTTP_BASE_URL, // 
  timeout: 10000, // axios請求超時時間設定
})

// 對所有axios請求資訊和返回資訊進行統一處理
http.interceptors.request.use(requestBefore, requestError)
http.interceptors.response.use(responseAfter, responseError)

export default http

5. mock資料的使用

   在public資料夾下建立mock資料夾，儲存mock資料

   在vue.config.js中配置devServer

   devServer: {
       proxy: { // 本地代理
         '/api': { // 將axios請求轉發到本地 獲取mock資料
           target: 'http://localhost:8080', 
           changeOrigin: true,
           pathRewrite: {
             '^/api': '/mock'
           }
         }
       }
   },
   

6. vue.config.js中chainWebpack配置

   chainWebpack: config => {
       config.resolve.alias
         .set("@", resolve("src"))
         .set("&", resolve("src/components"))
         .set("utils", resolve("src/utils"))
   },
   

   可以簡化程式碼中引入其他檔案的書寫，減小出錯率

7. 1. elslint配置檔案

   module.exports = {
     root: true,
     env: {
       node: true, // node 環境及全域性變數
       browser: true, // 瀏覽器環境及全域性變數
       es6: true // es6環境及全域性變數
     },
     plugins: ["vue"],
     extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
     parserOptions: {
       parser: "babel-eslint"
     },
     rules: {
       "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
       "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
     },
   };
   

8. gitlab配置

   // 已存在程式碼資料夾
   Existing folder
   cd existing_folder
   git init
   git remote add origin url
   git add .
   git commit -m "Initial commit"
   git push -u origin master