[Vueクイックスタート] VUE + ElementUIバックグラウンド管理システムフレームワークを最初から構築する

[Vueクイックスタート] VUE + ElementUIバックグラウンド管理システムフレームワークを最初から構築する

 

序文

バックエンド管理システムのフロントエンドフレームワークは現在非常に人気があり、上部と左側はナビゲーションメニューであり、中央は特定のコンテンツです。たとえば、Alibaba Cloud、Qiniu Cloud、Toutiaohao、Baijiahaoなど、それらの管理システムはすべてこのようなものです。

それでは、最初から始めて、主にVUE + ElementUIを使用してこのようなフロントエンドページフレームワークを構築する方法を友達に教えましょう。

 

プロジェクトをビルドする

Vueスキャフォールディングを使用して、webpackテンプレートに基づいて新しいプロジェクトを初期化します

vue init webpack testadmin

 

ずっと下に、プロジェクト名、プロジェクトの説明、作成者、vue-routerをインストールするかどうか（ここでYを選択します。後で使用する必要があります）、ESLintなどの入力を求められます。状況に応じて、それを入力します。

これでnpm install、プロジェクトに必要なモジュールのインストールを自動的に支援します。バージョンが自動的にインストールされない場合は、問題ありませんcd testadmin。プロジェクトディレクトリに切り替えます（例）。実施した

npm install

 

長時間応答がない場合は、 npm インストールするパッケージがすべて外部サーバー上にあるnpmため、リソースミラーを変更するだけ淘宝镜像です。

 

npmミラーアドレス構成

1.元のミラーアドレスを取得します

npm get registry 
> https://registry.npmjs.org/

 

2.淘宝網に設定

npm config set registry http://registry.npm.taobao.org/
> yarn config set registry http://registry.npm.taobao.org/

 

3.オリジナルと交換します

npm config set registry https://registry.npmjs.org/

 

npm run devわかりました。この時点で実行して、初期化されたプロジェクトを確認します。

npm run dev

 

プロジェクトのディレクトリ構造のプレビューとpackage.jsonの解析。

Element UIを統合し、フレームワークを構築しましょう。

 

VIEW +要素UI

インストールしてインポートする

同様に、プロジェクトのルートディレクトリにインストールしますElement UI

npm i element-ui -S

 

次に、/ src / main.jsファイルを開いて変更し、インポートしelement-uiます。

import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

 

コンテナレイアウトコンポーネント

srcディレクトリで、（すべてのビジネスページのディレクトリとして）新しいページフォルダを作成してから、ページの下に（フレームワーク構造ファイルとして）新しいlayout.vueを作成します。

次に、Element UI Containerを使用して、layout.vueでコンテナーコンポーネントをレイアウトします。

レイアウトに使用されるコンテナコンポーネントであるコンテナは、ページの基本構造をすばやく構築するのに便利です。

<el-container>：アウターコンテナ。子要素に<el-header> またはが含まれている 場合 <el-footer> 、すべての子要素は垂直方向に上下に配置されます。それ以外の場合は、水平方向に左右に配置されます。

<el-header>：トップバーコンテナ。
<el-aside>：サイドバーコンテナ。
<el-main>：メインエリアコンテナ。

次に、ルーティング/src/router/index.jsファイルを変更します

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout
    }
  ]
})

 

サービス（npm run dev）プレビューを開始します（以前に開始したことがある場合は必要ありません。ホットアップデートをサポートするためにwebpackが統合されています）。

NavMenuナビゲーションメニューコンポーネント

図は、直接layout.vueするために、コードの内部をコピー<el-header>、<el-aside>位置、及び微調整パターン。

プレビュー：

しかし、問題が見つかります。下の空白領域の大部分があります。理論的には、底は空白なしで覆われている必要があります。現時点では、この需要を満たすために同じスタイルを変更する必要があります。

/src/page/layout.vue内部のスタイルを変更します。

.el-container{
  position: absolute; 
  width: 100%; 
  top: 0px ; 
  left: 0 ; 
  bottom: 0;
}
.el-header{
  padding: 0;
  z-index: 1000;
}

// header菜单需要靠右的添加.fr即可(如：<el-menu-item class="fr" index="3">消息中心</el-menu-item>)
.el-header .fr{
  float: right;
}
.el-header .el-menu{
  border-bottom: none;
}
.el-aside, .el-main{
  padding-top: 60px;
}
.el-aside{
  background: #545c64;
}
.el-aside .el-menu{
  border-right: none;
}

次に/src/App.vue、内部にスタイルを追加します。

*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
  height: 100%;
}
#app {
  height: 100%;
}

 

Vueルーターのネストされたルーティング

次に、<el-main>それは他のすべてのページの表示領域である必要があります。ここに知識ポイントがあります：Vueネストルーティング。

例：現在のルートはlocalhost:8080、layout.vueファイルを開くことです。ルートを変更する場合はlocalhost:8080/main、main.vueのコンテンツを開く必要があります。ルートを変更する場合はlocalhost:8080/user、user.vueのコンテンツを開く必要があります。 。この機能を実現するにはどうすればよいですか？

この問題の解決に役立つVueネストルーティング！

まず、次のディレクトリページmain.vueに2つのファイルを作成しますuser.vue。

main.vue

<template>
  <div id="main">
    <h2>我这里是首页</h2>
    <router-link to="/user">前往用户中心</router-link>
  </div>
</template>

<script>
export default {
  name: 'main'
}
</script>

 

user.vue

<template>
  <div id="user">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户中心</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>用户中心</h2>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

 

次に重要なのは、ネストされたルーティングです。

/src/router/index.jsルーティングファイルを変更します。

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
import Main from '@/page/main'
import User from '@/page/user'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      // 嵌套路由
      children: [{
        // 这里不设置值，是把main作为默认页面
        path: '/', 
        name: 'Main',
        component: Main
      },{
        path: '/user',
        name: 'User',
        component: User
      }]
    }
  ]
})

 

同時に、「/ src / page / layout.vue」を<el-main>追加します<router-view/>：

...
<el-main><router-view/></el-main>
...

 

効果のプレビュー：

 

いくつかのオープンソースのVueベースのプロジェクトを推奨する

 

1、Sing App Vue Dashboard（github：https：   //github.com/flatlogic/sing-app-vue-dashboard  ）

これは、最新のVueとBootstrapに基づく無料のオープンソース管理テンプレートであり、実際には国内のvue-admin-templateに似ています。使用する必要はありませんが、ソースコードを勉強して学ぶことができます。多くの実践的なスキルを学ぶことができると思います。

2、vue-compnay-template（github：https：//gitee.com/Wjhsmart/vue-compnay-template ）

vueによって実装された一般的な企業のWebサイトテンプレートは、jquery、bootstarp、iviewを統合し、アドレスをすばやく体験できます：http：//tessai.cn