vue spa starter

multiple single page system

This system has been migrated to vue-cli-service build and can be used out of the box.

suggestion

• Environment: >=node8 + yarn
• Editor: vscode

start

yarn # npm i
yarn run dev # 默认入口为src/pages/*/index.js

Environment configuration

.env # 默认配置
.env.local # gitignore，会merge .env
.env.prod
.env.prod.local # gitignore，会merge .env.prod 

CommitLint

According to the general specification type

• feat: new function (feature)
• fix: fix bug
• docs: documentation
• style: style adjustment
• refactor: Refactor a function
• test: add test
• chore: changes to the build process or auxiliary tools
• perf: performance optimization
• revert: revert commit

 # type: 提交类型  scope: 变动范围  type为必需，scope选填
# git commit -m '${type}(${scope}): some message'
git commit -m ' feat: 增加 xxx 功能'
git commit -m ' fix: 修复 xxx 功能'
git commit -m ' fix(UserController): [bug005]修复用户权限问题' 

Eslint

Modified by .eslintrc.js

• 0 disable
• 1 warning
• 2 errors

Code specifications

• https://github.com/airbnb/javascript
• .vue files and related folders are named in all lowercase, separated by - , for example: button-group

Note

• js polyfill has been globally introduced into cdn through html, and there is no need to use babel-polyfill or transform-runtime to solve the problem.
• Customize the element-ui theme through ~/src/styles/element-theme.scss
• Common styles are written in ~/src/styles/${THEME}/app.scss
• The main style variables are named in ~/src/styles/${THEME}/variables.scss . Component styles unify the theme through defined variables.
• The icon library has been placed at https://www.iconfont.cn/ (currently in the github/evanliu2968 account)
• https://serverfault.com/questions/506972/nginx-why-i-cant-put-proxy-set-header-inside-an-if-clause

Enhance Project

Chart

• echarts
• ~/src/components/common/vue-echarts

upload

• components/common/file-upload ie10+ FormData upload, ie9 iframe upload

encrypted transmission

• https://blog.csdn.net/baidu_22254181/article/details/82594072
• Currently AES symmetric encryption is used, ~/src/libs/auth.js

webapck

• Babel does not transpile files in node_modules by default and needs to be declared in ~vue.config.js/transpileDependencies
• new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /^./(zh-cn)$/) removes other language packages (compressed package is more than 300 kb)
• It is too troublesome to introduce a single chart echarts (source code 2M+, compressed package 600kb). Use js in HTML to avoid packaging every time.

Server environment

nginx configuration address: cd /etc/nginx/vhost After modification, you need to restart nginx and use the docker command to restart and reload the configuration file: docker exec nginx nginx -s reload Check the configuration file: docker exec nginx nginx -t

Other process documents

• Environment release process.md
• Local development environment running process.md