vue-cli的安裝、查看、更新
vue-cli2.0+ ：npm install vue-cli -g ；
vue-cli3.0+ ： npm install @vue/cli -g
版本查看：vue -V
卸載： npm uninstall vue-cli -g
作者當前版本：
利用@符號安裝作者版本： npm install @vue/cli@3.11.0 -g (未試過)
作者npm以及nodejs版本：
備注：
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)
創建項目：
快速cmd到當前文件夾：
1. 控制台： vue create demo ； 選擇默認（default）還是手動（Manually）
；
2. 選擇 按下鍵盤下選中 Manually ，回車：
3. 選擇配置， 空格鍵是選中與取消，A鍵是全選；（作者選中：Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter）
Progressive Web App (PWA) Support PWA 支持。
Router： 支持 vue-router 。
Vuex： 支持 vuex 。
CSS Pre-processors： 支持 CSS 預處理器。
Linter / Formatter： 支持代碼風格檢查和格式化。
Unit Testing： 支持單元測試。
E2E Testing： 支持 E2E 測試。
4. 出現下面界面，輸入n 按下回車：
5. css的預處理， 作者選中：
6. 這里要選擇 standard ，對應的是一些eslint 的風格
7. 語法檢查方式，選擇保存就檢測（第一個是保存檢測，第二個是fix和commit的時候檢測）
8. 配置文件存放（一個是獨立文件夾位置，第二個是在package.json文件）
9. 是否記錄這一次的配置，以便下次使用，如一開始的時候會顯示的vuecli3配置（作者輸入y, 起名commom-demo） 回車確定等待下載
10. 作者下載的時候，安裝不了node-sass， 需要用淘寶鏡像重新安裝，不然啟動失敗
淘寶鏡像安裝： npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝命令： cnpm install node-sass --dev
11. 安裝好，啟動完成（打包，啟動命令，查看package.json）：
12. 項目重新用cnpm install 安裝，發現有下面報錯，雖然不影響使用，不過完美主義者看着不爽。（意思是說 scss-loader 8.0.0 的版本和當前node-sass版本不匹配，可能是項目初始化的時候下載不了node-sass, 作者重新用淘寶鏡像下載出現的問題）
解決方案：
卸載當前版本sass-loader命令：npm uninstall sass-loader
安裝低版本的sass-loader命令：npm install sass-loader@7.3.1 --save-dev
項目常用的插件說明以及安裝
作者開發的是后台管理系統，下面列舉一些用到的插件
3）moment 前端日期處理的插件； 官網： http://momentjs.cn/
安裝： cnpm i moment -S （簡寫模式）
4）qrcodejs2 二維碼生成器
安裝： cnpm i qrcodejs2 -S
5）js-md5 密碼加密
安裝：cnpm i js-md5 -S
6）vuescroll 滾動條樣式
安裝：cnpm i vuescroll -S
一起: cnpm i axios js-md5 moment element-ui qrcodejs2 vuescroll -S
關於配置文件vue.config.js的常用說明
官網：https://cli.vuejs.org/zh/config/ 下面是常用的配置說明
1） 配置全局應用scss變量、混入
安裝： npm i style-resources-loader vue-cli-plugin-style-resources-loader -D
配置：vue.config.js文件：
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
// 引入全局樣式變量
patterns: [
path.resolve(__dirname, 'src/assets/styles/var.scss'),
path.resolve(__dirname, 'src/assets/styles/mixin.scss')
]
}
},
2） 樣式找到源
配置：vue.config.js文件：
css: {
// 讓樣式找到源
sourceMap: true,
},
3）配置代理相關
下面的例子是所有/api 開頭的請求，代理到 http://localhost:8081/ ，target 是后端對接人，或者測試環境的地址
devServer: { hot: true, // 配置 eslint 錯誤顯示在控制台上 clientLogLevel: 'warning', proxy: { '/api': { target: ''http://localhost:8081/', // 代理服務器 secure: false, changeOrigin: true, pathRewrite: { '/api': '' } } } }
由於上面只是代理/api開頭的地址，問題是實際上的地址未必都是 /api 開頭，所以公共請求那里，有下面配置：
備注： axios 插件的 baseURL可以給所有請求添加一樣的前綴，可以是絕對路徑也可以相對路徑；下面的意思是所有開發環境的請求，都自動添加前綴 ‘/api’ , 生產環境build的時候回去掉；
4）別名設置
使用： import xxx from '@/xxx'; => import xxx from 'src/xxx';
// 別名設置
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'));
},
5）設置部署路徑publicPath ( 3.3之前的版本是baseUrl)
publicPath: '/my-app/',
備注：所有的路徑，最好使用 require,
例子：
6）多頁面配置
如果應用上有某些頁面需要區別於整個應用，例如無需登錄認證，權限認證，或者某些頁面是所有人都可以訪問的，這樣的場景可以配置多頁面，官方說明如下：https://cli.vuejs.org/zh/config/#pages
使用多頁面的情況：
登陸頁面，
有一些需要提供給用戶看（用戶不需要登陸）的頁面，例如提供一個下面客戶端的頁面等；
// 單頁面無需配置
pages: { index: { entry: './src/main.js', template: './public/index.html', filename: 'index.html' }, versionDetails: { entry: './src/pages/version-details/main.js', template: './public/index.html', filename: 'versionDetails.html' } },
訪問第一個頁面index.html: http://localhost:8080/ (默認頁面)
訪問第二個頁面： http://localhost:8080/versionDetails.html?id=25#/ （配置頁面的filename）
7）lintOnSave報錯語句的配置
另外的一個配置： eslint 錯誤顯示在控制台上
8）關於資源路徑的解釋
靜態資源可以通過兩種方式：
a: 在 JavaScript 被導入或在 template/CSS 中通過相對路徑被引用。這類引用會被 webpack 處理。
b: 放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理。
public 文件夾(建議少用)
任何放置在 public 文件夾的靜態資源都會被簡單的復制，而不經過 webpack。你需要通過絕對路徑來引用它們。
public 目錄提供的是一個應急手段，當你通過絕對路徑引用它時，留意應用將會部署到哪里。如果你的應用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴：
下面是作者的配置：
url.config.js：
let baseURL = {
development: '/api', // 開發環境
production: '' // 生產環境
};
module.exports = {
// 配置axios的baseURL； 開發環境是所有的請求前序添加 /api 用於代理； 生產環境設置為''
axiosBaseURL: baseURL[process.env.NODE_ENV],
// 開發環境代理服務器配置
proxyTarget: 'http://localhost:8081/'
// proxyTarget: 'http://10.8.108.105:8081/'
};
vue.config.js
var urlConfig = require('./url.config.js');
const path = require('path');
const resolve = function (dir) {
return path.join(__dirname, dir);
};
module.exports = {
pages: {
index: {
entry: './src/main.js',
template: './public/index.html',
filename: 'index.html'
},
versionDetails: {
entry: './src/pages/version-details/main.js',
template: './public/index.html',
filename: 'versionDetails.html'
}
},
css: {
// 讓樣式找到源
sourceMap: true,
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
// 引入全局樣式變量
patterns: [
path.resolve(__dirname, 'src/assets/styles/var.scss'),
path.resolve(__dirname, 'src/assets/styles/mixin.scss')
]
}
},
// 打包后是否去掉打印語句
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = false;
}
},
// 別名設置
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'));
},
publicPath: '/portal',
devServer: {
hot: true,
// 配置 eslint 錯誤顯示在控制台上
clientLogLevel: 'warning',
proxy: {
[urlConfig.axiosBaseURL]: {
target: urlConfig.proxyTarget,
secure: false,
changeOrigin: true,
pathRewrite: { [`^${urlConfig.axiosBaseURL}`]: '' }
}
}
}
};
package.json（作者的版本全部限死）
補充下版本的知識：
（1）指定版本："classnames": "2.2.5"，安裝2.2.5的版本
（2）~： "classnames": "~1.1.0", 安裝1.1.x的最新版本（不低於1.1.0），但不安裝1.2.x，就是說安裝時不改變大版本號和次要版本號
（3）^： "classnames": "^3.1.4", 安裝3.1.4及以上的版本，但是不安裝4.0.0，也就是說安裝時不改變大版本號。
{
"name": "demo-02",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "0.19.0",
"core-js": "3.4.3",
"element-ui": "2.13.0",
"js-md5": "0.7.3",
"moment": "2.24.0",
"qrcodejs2": "0.0.2",
"vue": "2.6.10",
"vue-router": "3.1.3",
"vuescroll": "4.14.4",
"vuex": "3.1.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.1.0",
"@vue/cli-plugin-eslint": "4.1.0",
"@vue/cli-service": "4.1.0",
"@vue/eslint-config-standard": "4.0.0",
"babel-eslint": "10.0.3",
"eslint": "5.16.0",
"eslint-plugin-vue": "5.0.0",
"node-sass": "4.12.0",
"sass-loader": "8.0.0",
"style-resources-loader": "1.3.2",
"vue-cli-plugin-style-resources-loader": "0.1.4",
"vue-template-compiler": "2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
eslint配置：.eslintrc.js
// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true }, extends: [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential', // https://github.com/standard/standard/blob/master/docs/RULES-en.md 'standard' ], // required to lint *.vue files plugins: ['vue'], rules: { // function 的小括號之前必須要有空格 'space-before-function-paren': 'off', // 文件最后一行必須有一個空行 'eol-last': 'off', // 禁止行尾有空格 'no-trailing-spaces': 'off', // 定義過的變量必須使用 'no-unused-vars': 1, // 對象的最后一個屬性末尾必須有逗號 'comma-dangle': 'off', // 允許用字面量{}拋出異常 'no-throw-literal': 0, // 箭頭函數只有一個參數的時候，必須加括號 'arrow-parens': 'off', // 語句強制分號結尾 'semi': [2, 'always'], // 縮進風格: 一個縮進必須用2個空格替代 'indent': [1, 2, { 'SwitchCase': 1 }], // 一個let或者var只能聲明一個變量 'one-var': ['error', 'never'], // 禁止使用debugger 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } }