vue spa starter

複数の単一ページ システム

このシステムは vue-cli-service ビルドに移行されており、そのまま使用できます。

提案

• 環境: >=node8 + 糸
• エディタ: 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 

コミットLint

一般仕様タイプによると

• 特技：新機能（機能）
• 修正: バグを修正
• ドキュメント: ドキュメント
• スタイル: スタイル調整
• リファクタリング: 関数をリファクタリングする
• テスト: テストを追加
• 雑務: ビルドプロセスまたは補助ツールの変更
• perf: パフォーマンスの最適化
• 元に戻す: コミットを元に戻す

 # 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]修复用户权限问题' 

エスリント

.eslintrc.jsによって変更されました

• 0 無効にする
• 1 警告
• 2 エラー

コード仕様

• 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

プロジェクトを強化する

チャート

• eチャート
• ~/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

ウェブパック

• Babel は、デフォルトでは、node_modules 内のファイルをトランスパイルしないため、 ~vue.config.js/transpileDependenciesで宣言する必要があります。
• new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /^./(zh-cn)$/)他の言語パッケージを削除します (圧縮パッケージは 300 kb を超えます)
• echarts 1 つのチャートを導入するのは面倒です (ソース コード 2M+、圧縮パッケージ 600kb)。毎回のパッケージ化を避けるために HTML で js を使用します。

サーバー環境

nginx 設定アドレス: cd /etc/nginx/vhost 変更後、nginx を再起動し、docker コマンドを使用して設定ファイルを再起動してリロードする必要があります: docker exec nginx nginx -s reload 設定ファイルを確認します: docker exec nginx nginx -t

その他のプロセス文書

• 環境解放プロセス.md
• process.md を実行するローカル開発環境