VUE-CLI3配置

一、安裝

腳手架3.0以下： npm install -g vue-cli @版本號
腳手架3.0以上： npm install -g @vue/cli @版本號
1.node.js安裝
nodejs官網：https://nodejs.org/en/，最好安裝在預設檔案裡面
2.安裝vue腳手架
npm install -g @vue/cli
解除安裝腳手架：npm uninstall vue-cli -g
檢視版本號：vue -V
3.建立專案
vue create 專案名
選擇專案需要的一些特性()

上下鍵到目標選項，空格鍵選中或者取消選擇，根據專案需要自行配置

專案結構：

node_modules：專案需要的依賴
public:靜態資源打包不被壓縮，直接複製到dist裡面
src/assets: 靜態檔案比如圖片、css、js指令碼
src/components: 一般用來存放公共元件
src/router: 路由相關配置
src/views: 頁面
src/App.vue: 根元件
src/main.js: 專案入口檔案（公共元件引入，vue例項化）
.gitignore: git 配置檔案。比如不需要上傳的檔案在這裡面做配置
pakage.json: npm配置項，專案執行打包命令都可以在這裡面javascript裡面檢視配置

二、配置

1.package.json檔案

2.配置打包後檔案的執行環境
安裝serve伺服器：npm install -g serve
執行：1.cd dist(打包後的檔案) 2. serve

3.環境變數配置
專案根目錄下新建.env檔案
變數必須以 VUE_APP_開頭否則獲取到的為undefined
VUE_APP_BASEURL = http://xxxxx.com

列印結果

生產環境變數配置：
在根目錄下配置.env.production
開發環境變數配置：
根目錄下新建：.env.development

列印：

開發環境下執行結果：

打包後，生產環境執行結果：

4. vue.config.js配置

module.exports = {
    publicPath: '/', // 跟目錄路徑，這個路勁根據包所在伺服器位置相對伺服器根目錄決定的。
    outputDir: 'dist', // npm run build 會在專案根目錄新建一個dist資料夾，打包後的檔案會存進dist資料夾裡面（輸出目錄）
    assetsDir: "assets", // 存放靜態資源img,css,js
    lintOnSave: false, // 是否開啟eslint監測，false不開啟，true開啟，開啟後會根據他自身規則嚴格管理專案編碼的風格
    productionSourceMap: true, // 生產環境下，可以斷點檢測程式碼,可以在瀏覽器控制檯sources裡面檢視有什麼不同
    // 生產環境下伺服器配置
    devServer: {
        open: false, //是否在啟動專案後自動開啟瀏覽器
        host: "localhost", //主機，0.0.0.0支援區域網地址，可以用真機測試
        port: 8080, //埠
        https: false, //是否啟動https
        //配置跨域代理
        proxy: {
            "/api": {
                target: "http://vueshop.glbuys.com/api",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ""
                }
            } // 重寫路徑
        }
        // 寫法作用與上面寫法相同
        // proxy:{
        //     "/api":{
        //     target:"http://vueshop.glbuys.com"
        // }
    },
    configureWebpack: {
        devtool: 'source-map' //配置開發者環境的sourceMap用於斷點除錯
    }
}

5.eslint
官網：http://eslint.cn
作用

1. 提供編碼規範；
2. 提供自動檢驗程式碼的程式，並列印檢驗結果：告訴你哪一個檔案哪一行程式碼不符合
   哪一條編碼規範，方便你去修改程式碼。
   在vue-cli3裡面使用需要安裝：
   npm install --save-dev eslint babel-eslint @vue/cli-plugin-eslint eslint-plugin-vue

// 在package.json裡面新增
"eslintConfig": {
"root": true, //此項是用來告訴eslint找當前配置檔案不能往父級查詢
"env": {
"node": true //此項指定環境的全域性變數，下面的配置指定為node環境
},
"extends": [// 此項是用來配置vue.js風格，就是說寫程式碼的時候要規範的寫
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {//規則配置寫在這裡
"semi": ["error", "always"],
"no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
},
"parserOptions": {
"parser": "babel-eslint"//此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包
裝使其與ESLint解析 }

package.json

{
    "name": "store-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "vue-template-compiler": "^2.6.11"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {
            "semi": ["error", "always"],
            "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
        },
        "parserOptions": {
            "parser": "babel-eslint"
        }
    }
}