vue spa starter

多單頁系統

本系統已遷移至vue-cli-service構建，開箱即用

建議

• 環境: >=node8 + yarn
• 編輯器：vscode

開始

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

環境配置

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

CommitLint

依照通用規範type

• feat: 新功能（feature）
• fix: 修補bug
• docs: 文件（documentation）
• style: 樣式調整
• refactor: 重構某功能
• test: 增加測試
• chore: 建置過程或輔助工具的變動
• perf: 效能優化
• 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

透過.eslintrc.js修改

• 0 disable
• 1 warning
• 2 error

程式碼規範

• https://github.com/airbnb/javascript
• .vue檔案及相關資料夾命名為全小寫，以-分隔，例如： button-group

注意點

• js的polyfill已透過html全域引入cdn，不需要再使用babel-polyfill或transform-runtime來解決
• 透過~/src/styles/element-theme.scss客製化element-ui主題
• 通用樣式寫在~/src/styles/${THEME}/app.scss
• 主要樣式變數命名在~/src/styles/${THEME}/variables.scss ，元件樣式透過已定義變數統一主題
• 圖示庫已放在https://www.iconfont.cn/ (目前掛在github/evanliu2968帳號內)
• 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

上傳

• components/common/file-upload ie10+ FormData上傳，ie9 iframe上傳

加密傳輸

• https://blog.csdn.net/baidu_22254181/article/details/82594072
• 目前採用AES對稱加密， ~/src/libs/auth.js

webapck

• babel預設不轉node_modules裡的文件，需要在~vue.config.js/transpileDependencies聲明
• new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /^./(zh-cn)$/)去除其他語言包(壓縮包300多kb)
• echarts單一圖表引入太麻煩(源碼2M+,壓縮包600kb)採用在html中引入js，避免每次打包

伺服器環境

nginx設定位址: cd /etc/nginx/vhost 修改完需要重新啟動nginx，以docker指令重新啟動重載設定檔：docker exec nginx nginx -s reload 檢查設定檔：docker exec nginx nginx -t

其他流程文檔

• 環境發布流程.md
• 本機開發環境運作流程.md