iTaster admin template

索引

• 一般化する
• インストール
• 使用
• 更新する
• 構成
• 建築
• 既知の問題
• ライセンス

一般化する

vue-cli の Webpack4.x テンプレートに基づいて変更された管理者用のコードです。これは純粋に楽しみと練習のためのものです。ダウンロードしないでください。

アップデート手順

• 2018/6/19 webpack をアップグレードし、webpack4 を使用し、新しいプラグイン mini-css-extract-plugin を推奨します

インストール

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

デフォルトでは、http://localhost:1988/ が自動的に開きます。

使用

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

更新する

プロジェクト モジュールの後続の更新を確実にするため

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

npm outdatedコマンドは、インストールされているモジュールをチェックし、どのモジュールが古いかを示します。

具体的な情報には、現在インストールされているバージョン (Current)、更新する必要があるバージョン (Wanted)、およびリポジトリ内の最新バージョン (latest) が含まれます。

構成

1. distフォルダーをアップロードする場合は、無視されるファイル構成 ( .gitignoreファイル) 内の/dist削除するだけです。

2. デフォルトでは、 webpackによってコンパイルおよび処理されたリソース ファイルはstaticフォルダーに保存されます。それらをルート ファイル ディレクトリにのみ保存した​​い場合は、 config/index.jxの下のbuild.assetsSubDirectoryパラメーターを変更して空白のままにします。でもお勧めしません！このように、パッケージ化するときに一部の画像パスが間違ってしまいます。10kb 未満のリソースと一部の svg アイコン (通常は変更されないもの) をsrc/assetsフォルダーに配置し、その他をstaticフォルダーに配置することをお勧めします。フォルダ。

3. デフォルトでは、パッケージ化されたcss/jsファイルにはsource mapが含まれており、これは開発環境でのconfig/index.jsのデバッグに非常に役立ちますが、コンパイル環境や運用環境では推奨されません。 build.productionSourceMapをfalseに変更します。

4. コードがサーバー上で実行されており、アドレス バーに#/入れたくない場合は、 router/index.jsのmode: 'history'注釈を削除する必要があります (バックエンド構成も必要です。それ以外の場合は、ページが更新されます 404); ページでアンカー ジャンプを使用する必要がある場合は、指定された場所に移動し、 scrollBehaviorアノテーションを削除します。

5. autoprefixerプラグインが付属しています。vue ファイルに CSS コードを直接記述すると、自動的にプレフィックスが追加されます。

建築

大規模な単一ページの開発では、次のディレクトリ構造が推奨されます。

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

アドバンテージ：

• 別のプロジェクトで /login を使用する場合は、それを /components ディレクトリにコピーまたは移動します。

• 外部依存関係をインストールし、構成内で同じローダーを定義している限り、プロジェクトは正常に実行されるはずです。

既知の問題

• 左側のサイドバーを非表示にするバグがあります

貢献する

問題やプル リクエストを送信することで、このプロジェクトに自由に貢献できます。このプロジェクトはテスト駆動であるため、すべての変更と新機能はテストでカバーされる必要があることに注意してください。

ライセンス

このプロジェクトは MIT の下でライセンスを取得しています。