安裝cli
若之前安裝過2.x.x，3.x.x建議卸載
npm uninstall vue-cli -g
# or
yarn global remove vue-cli
可以通過
npm list --global --depth=0,查看當前全局安裝的包(–depth 表示深度，我們使用的模塊會有依賴，深度為零的時候，不會顯示依賴模塊)，也可直接npm list <packagename>
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看是否安裝成功``
# 輸入
$ npm list --global @vue/cli
# 輸出
/Users/linqiang/.nvm/versions/node/v10.18.0/lib
└── @vue/cli@4.1.1
創建項目
vue create [project-name]
配置pug
npm i pug pug-plain-loader pug-loader pug-filters -D
配置全局sass變量
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這里假設你有 `src/variables.sass` 這個文件
// 注意：在 sass-loader v7 中，這個選項名是 "data"
prependData: `@import "~@/assets/css/_global-variables.sass";`
}
}
}
};
背景圖路徑處理方案
在實際開發中會遇到本地開發環境的同線上背景圖片資源地址不同的情況，這里我遇到的是在本地開發中的路徑是/images/a.png,線上的地址是/xxx/images/a.png,其中xxx是部署應用包時的基本 URL對應vue.config.js 中的 publicPath 選項，針對以下兩種情況：
- 直接書寫的css樣式中的背景圖路徑
- 具體業務中通過js動態設置背景圖路徑
考慮解決方案：
- 將圖片統一放在publilc/images下
- 解決直接書寫的樣式中的背景圖路徑： 在vue.config.js中注入sass全局變量$baseUrl，其值等於publicPath
- 解決js動態設置背景圖路徑：掛載
Vue.prototype.$baseUrl = process.env.BASE_URL, BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑（詳情）。
// vue.config.js
const baseUrl = process.env.NODE_ENV === 'production' ? '/sub/' : '/';
module.exports = {
publicPath: baseUrl,
css: {
loaderOptions: {
sass: {
data: `$baseUrl: "${baseUrl}";`
}
}
}
}
// main.js
Vue.prototype.$baseUrl = process.env.BASE_URL;
在sass中使用
background-image: url($baseUrl + 'images/logo.png')
在js中使用
let dom = document.createElement('div');
dom.innerHTML = `<div style="background-image: url(${vm.$baseUrl}/images/logo.png)">`；
移動端適配-rem方案
// vue.config.js
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 50, // 根節點的
propList: ['*']
})
]
}
}
}
};
移動端適配-viewport方案
// vue.config.js
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
// 視窗的寬度，對應設計稿的寬度
viewportWidth: 375,
// 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
// viewportHeight: 1334,
// 指定`px`轉換為視窗單位值的小數位數
unitPrecision: 3,
// 指定需要轉換成的視窗單位，建議使用vw
viewportUnit: 'vw',
// 指定不轉換為視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
selectorBlackList: ['.ignore'],
// 小於或等於`1px`不轉換為視窗單位，你也可以設置為你想要的值
minPixelValue: 1,
// 允許在媒體查詢中轉換`px`
mediaQuery: false
})
]
}
}
}
};
移動端調試
// main.js
// 僅在開發環境下面使用vConsole進行調試
if (process.env.NODE_ENV === 'development') {
const VConsole = require('vconsole')
new VConsole()
}
配置element-ui
按需引入需要安裝plugin
npm install babel-plugin-component @babel/preset-env -D
配置引入
// main.js
import 'element-ui/lib/theme-chalk/index.css';
import { Button, Select } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@babel/preset-env', { 'modules': false }]
],
'plugins': [
[
'component',
{
'libraryName': 'element-ui',
'styleLibraryName': 'theme-chalk'
}
]
]
};
自定一主題報錯
element-variables.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: media query expression must begin with '('
on line 2 of /Users/linqiang/Documents/workplace/vte-management-platform/src/element-ui-config/element-variables.scss
額，上方引入的全局的sass變量需要加;
...
prependData: `@import "~@/assets/css/_global-variables.sass";`
...
配置history模式
NGINX配置
location / {
# try_files $uri $uri/ =404;
try_files $uri $uri/ /index.html;
}
# 如果是多級目錄則
location /patient/ {
try_files $uri $uri/ /patient/index.html;
}
location /patient/smart/ {
expires 0;
alias /home/work/dev/web/smart/dist/;
try_files $uri $uri/ /patient/smart/index.html;
}
# location /monitor/ {
# expires 0;
# alias /home/work/dev/web/monitor/dist/;
# try_files $uri $uri/ =404;
# }
# location ~ ^/api/(.*)$ {
# proxy_pass http://cnblogs.com/api/$1;
# }
修改后重啟NGINX
# chown -R linqiang.fan /home/work/dev/web
# sudo su - root
nginx -s reload
### 查詢執行歷史
history|grep nginx
### 驗證一下配置的是否正確
sudo /home/work/nginx/sbin/nginx -t
### 如果沒有找到nginx命令
sudo /home/work/nginx/sbin/nginx -s reload
router配置
...
export default new Router({
mode: 'history',
// base: 'subsite', // 如果有二級路由則需要配置base為二級路由的名稱
routes: routers
});
配置調試預置cookie
devServer: {
proxy: {
'/api': {
// target: 'xxxx',
target: 'http://xxx.com',
changeOrigin: true,
pathRewrite: {
},
onProxyReq: function(proxyReq, req, res) {
proxyReq.setHeader('cookie', 'SESSION=' + 'xxxx' );
}
}
}
}
配置optional-chaining
安裝插件
@babel/plugin-proposal-optional-chaining
在babel.config.js中配置
module.exports = {
'plugins': [
'@babel/plugin-proposal-optional-chaining'
]
};
若eslint報錯則添加配置到.eslintrc.js
module.exports = {
parserOptions: {
parser: 'babel-eslint'
}
}
eslint 配置全局變量無需校驗
module.exports = {
globals: {
google: true // 例如：google map 全局變量
},
}
添加gitHooks：pre-commit
安裝包
npm i lint-staged -D
在package.json中添加：
{
...
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}
報錯
Missing class properties transform:
1.
npm i babel-plugin-transform-class-properties --save-dev
2.
.babe.rc中添加插件
"plugins":["transform-class-properties"]
sass 與 js 共享變量
詳見https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
// styles/animation.scss
$animation-length: 250;
$animation-length-ms: $animation-length + 0ms;
:export {
animationMillis: $animation-length-ms;
}
.component-enter {
...
transition: all $animation-length-ms ease-in;
}
import styles from '../styles/animation.scss'
// 需要注意的是，返回的值都是字符串類型
const millis = parseInt(styles.animationMillis)
!> 測試了下，.sass文件貌似不支持