VUE バックグラウンド管理インターフェイスのケース共有

この記事では、主に VUE バックエンド管理インターフェイスのケースを共有します。主な機能は次のとおりです。

ログインとログアウト機能

国際化された中国語と英語のインターフェイス切り替え

動的メニューリスト

動的ページの追加と削除によるコンポーネント切り替え表示

ルート切り替えメニュー機能

vueはWebフロントエンドフレームワークの構築を実装しています、ここをクリックしてくださいベースに独立したコンポーネントを追加することで、完全なバックグラウンド管理システムを迅速に開発できます

エフェクト表示

テクノロジースタック

vue.js ユーザーインターフェイスを構築するための MVVM フレームワーク、中心的なアイデアは次のとおりです: 、コンポーネントシステム。

vue-cli は Vue のスキャフォールディング ツールであり、ディレクトリ構造、ローカル デバッグ、コードのデプロイ、ホット ロード、単体テストを提供します。

vue-router は、vue.js を使用してシングルページ アプリケーションを簡単に構築できる公式ルーターです。

vue-resource はデータを要求し、サーバーと通信します。

vuex は、vue.js アプリケーション用に特別に開発された状態管理モデルです。簡単に言えば、Vuex はデータを管理します。

Element は、開発者、デザイナー、プロダクト マネージャー向けに用意された Vue 2.0 ベースのデスクトップ コンポーネント ライブラリです

Vue-progressbar プログレス バー コンポーネント。

vue-i18n 国際リソース管理コンポーネント。

ビルドセットアップ

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

プロジェクトの組織構造

├─ .eslintrc.js  
├─ index.html  
├─ package.json // 配置文件  
├─ README.md // 说明文件  
├─ build // webpack打包执行文件  
├─ config // webpack打包配置文件  
├─ code-standards //编码规范  
├─ src   
│　　├─ main.js // webpack入口/项目启动入口  
│　　├─ api // 存放api接口文件，服务层   
│　　├─ common // 存放私有系统的公共样式、脚本、图片  
│　　│　　├─ css  
│　　│　　│　　└─ common.css // 公共样式  
│　　│　　├─ img // 公共图片  
│　　│　　├─ js  
│　　│　　│　　├─ common.js // 公共脚本  
│　　│　　│　　└─ utils.js // 工具类  
│　　├─ config  
│　　│　　├─ index.js // 共有配置文件  
│　　├─ router  
│　　│　　├─ index.js // 存放路由  
│　　├─ views // 视图 （路由跳转的页面）  
│　　├─ pages //子视图（嵌套）  
│　　│　　├─ pages.md  
│　　├─ vuex // 这一块将存放于common项目  
│　　│　　├─ index.js  
│　　│　　├─ actions  
│　　│　　├─ getters  
│　　│　　└─ modules

関連する推奨事項:

React Family Bucketを使用したバックエンド管理システム構築の詳細な例

[バックエンドテンプレート] 5つのハイエンドおよびハイエンドWebサイトバックエンドを収集管理システム テンプレート

今日のおすすめ: シンプルでエレガントな Web サイト バックエンド管理システム テンプレート 10 個

以上がVUE バックグラウンド管理インターフェイスのケース共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。