vue2 admin
1.0.0
エクスペリエンスアドレス: vue2-admin
アカウント: admin パスワード: admin
バグが発生した場合、またはより良い実装がある場合は、お気軽に私にご連絡ください (コードがわからない場合は、電子メールを送って質問することもできます)。電子メール: [email protected]
vue2 バージョンの github アドレス: vue2-admin
gitee ウェアハウスもあります。上のリンクの github を gitee に変更するだけです。
1. 最初の画面読み込みアニメーション
2.axiosパッケージ
3.ルーター許可制御
4. 権限に基づいてサイド ナビゲーション バーを動的に生成する
5. ログインロジック
6.ダッシュボードページのレイアウト
8. el-tooltip の二次カプセル化に基づくコンポーネントは、長さを超えた場合にのみツールチップを表示し、el-tooltip のすべての属性をサポートします。 9. el-table の二次カプセル化に基づくコンポーネントは、el のすべての属性をサポートします。 -table、およびページングをサポートします。 10. el-icon の二次カプセル化に基づくアイコン選択コンポーネント。 11. トークンのタッチレス更新機能。
機能を過度にカプセル化することはなく、基本的なページ フレームワークとルーティング構造のみを提供します。残りの機能は完全にユーザー自身の開発に委ねられます。
効果を実証するために、mock.jsを使って正式環境でテストデータを生成してみました。ただし、正式版は使用しません。
正式利用時は中断時に実行してください。
npm uninstall mockjs --save
開発中にテストデータが必要な場合は、次の手順を実行して開発環境にmockjsをインストールしてください。
npm install mockjs -D
リクエストヘッダーはutils/request.jsで設定でき、実際の状況に応じて変更できます。
utils/setting.js の API でリクエストのベース URL を構成します。
一般的な環境は .env です
開発環境は.env.developmentです
本番環境は .env.production です。
環境変数の優先順位 .env.production = .env.development > .env
プロジェクトの src ディレクトリに api フォルダーがあり、その中に新しい user.js ファイルを作成します。このファイルは API を記述するためのカプセル化プロセスです。
デバッグや一元管理を容易にするために、インターフェイスの種類を使用する場合は同じファイルに置くことをお勧めします。
@/api/user.js 形式が使用されている場合は、使用時に最初に導入されます。たとえば、最初に @/component/login.vue にファイルを導入します。
import { loginApi } from "@/api/user"
login ( ) {
let data = this . ruleForm
loginApi ( data ) . then ( res => {
console . log ( res )
} )
} インターフェイスから返されたデータに基づいてルートを動的に生成し、インターフェイス データに基づいてナビゲーション バーを生成します。
@/router/beforEach.js にルートガードが追加されています。その他の機能（特定の操作を実行した後にのみ特定のページに入ることができるなど）を実装したい場合に追加できます。 router/beforEach.js 内 対応するロジックを Selfexecution 関数に追加します。
@/router/beforEach.jsのmeta属性でサイドバーのアイコン、タイトル、非表示を設定します。 hidden:true の場合、サイド ナビゲーション バーは表示されません。
サイドバーの色はutils/settingのテーマのside_colorとside_rext_colorで変更できます。
vuex のモジュール化、ログイン、権限制御を別のモジュールに配置する
vuex データの更新損失を防ぐために、vuex-persistedstate を導入します。
// 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
storage : window . sessionStorage ,
reducer ( val ) {
return {
// 只储存state中的isPC
isPC : val . user . isPC
}
}
} ) ]ユーザーがセッションストレージを手動で変更できないようにするために、リッスンイベントが追加されます
window . addEventListener ( 'storage' , function ( e ) {
sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 基本的なボタン調整コードが追加され、v-preventReClick をボタンにバインドできます。
// button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
inserted ( el , binding ) {
el . addEventListener ( "click" , ( ) => {
if ( el . style . pointerEvents !== "none" ) {
el . style . pointerEvents = "none"
setTimeout ( ( ) => {
el . style . pointerEvents = ""
} , 2000 )
}
} )
}
} ) ログインページ、
パスワード取得ページ、
404ページ、
ホームページ
npm uninstall mockjs --save
npm install mockjs -D
npm install
npm run serve
npm run build
npm run lint
docker build -t vue-admin . --no-cache
