VUE安裝使用element-ui插件-有解無憂

了解element-ui請到官網：https://element.eleme.cn/#/zh-CN/component/installation

在WebStorm編輯器的專案終端中使用安裝命令：cnpm i element-ui --save 或者cnpm install element-ui -S

等待如下安裝資訊：

D:\webstormworkspace\sobblogadmin>
D:\webstormworkspace\sobblogadmin>cnpm i element-ui --save
√ Installed 1 packages
√ Linked 10 latest versions
[1/1] scripts.postinstall element-ui@2.14.1 ? async-validator@1.8.5 ? babel-runtime@6.26.0 ? core-js@^2.4.0 run "node -e \"try{require('./postinstall')}ca
tch(e){}\"", root: "D:\\webstormworkspace\\sobblogadmin\\node_modules\\_core-js@2.6.12@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[1/1] scripts.postinstall element-ui@2.14.1 ? async-validator@1.8.5 ? babel-runtime@6.26.0 ? core-js@^2.4.0 finished in 252ms
√ Run 1 scripts
deprecate element-ui@2.14.1 ? async-validator@1.8.5 ? babel-runtime@6.26.0 ? core-js@^2.4.0 core-js@<3 is no longer maintained and not recommended for usa
ge due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
√ All packages installed (11 packages installed from npm registry, used 9s(network 9s), speed 344.53kB/s, json 11(97.14kB), tarball 2.77MB)

D:\webstormworkspace\sobblogadmin>

安裝完成后，可以在專案的package.json檔案中的依賴配置部分查看版本：

  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.14.1",
    "vue": "^2.6.11",
    "vue-router": "^3.4.9"
  },

這里是2.14.1版本，安裝完后下面就是引入使用了，繼續.....

后面總結使用示例，跨年快樂！新的2021年新的開始！新的自己！努力提升自己！善待歲月！善待自己！

引入 Element

你可以引入整個 Element，或是根據需要僅引入部分組件，我們先介紹如何引入完整的 Element，

完整引入，在 main.js 中寫入以下內容：

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

Vue.use(ElementUI);

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

以上代碼便完成了 Element 的引入，需要注意的是，樣式檔案需要單獨引入，部分引入請參考官網（快速上手）：https://element.eleme.cn/#/zh-CN/component/quickstart

引入后，下面說一下最基礎的Button按鈕的使用：

點擊頁面中的“顯示代碼”后，會展現如下的代碼段，這些代碼都是與上面圖示效果一一對應的，我們用一個默認的按鈕樣式：

復制如下：

<el-row>
  <el-button>默認按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success">成功按鈕</el-button>
  <el-button type="info">資訊按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>
</el-row>

這這段代碼復制到需要使用的vue組件界面中，比如：

<template>
  <div>
      <h1>儀表盤</h1>
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">資訊按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
  </div>
</template>

<script>


</script>

<style>

</style>

顯示效果如下：

效果是不是還不錯！只是最基礎的代碼段參考！相信小伙伴都會舉一反三！

Container布局容器的使用：

同樣是點擊“顯示代碼”復制相應的代碼：

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>

布局代碼就要用在布局視圖中，所以我們的布局檔案如下：

base-view.vue組件頁面：

<template>
  <!-- 瀏覽器顯示 ①頂部內容部分 ②左側導航欄部分 ③右側內容部分（嵌套了right-content.vue組件頁面的內容部分） -->
  <div>
    <div class="header-part">①頂部內容部分</div>
    <div class="content-box">
      <!--瀏覽器頁面顯示內容 ②左側導航欄部分 -->
      <div class="nav">
        <router-link to="/login/login">登錄</router-link>
        <br>
        <router-link to="/content/manage-article">文章管理</router-link>
        <br>
        <router-link to="/content/manage-comment">評論管理</router-link>
        <br>
        <router-link to="/content/manage-image">圖片管理</router-link>
        <br>
        <router-link to="/content/post-article">發表文章</router-link>
        <br>
        <router-link to="/index">儀表盤</router-link>
        <br>
        <router-link to="/operation/manage-category">分類管理</router-link>
        <br>
        <router-link to="/operation/manage-loop">輪播圖管理</router-link>
        <br>
        <router-link to="/settings/friend-link">友情鏈接</router-link>
        <br>
        <router-link to="/settings/website-info">網站資訊</router-link>
        <br>
        <router-link to="/user/admin-info">管理員資訊</router-link>
        <br>
        <router-link to="/user/email">郵件</router-link>
        <br>
        <router-link to="/user/list-user">管理員串列</router-link>
        <br>
        <router-link to="/user/reset-password">重置密碼</router-link>

      </div>
      <div class="content">
        <!--瀏覽器頁面顯示的內容 ③右側內容部分，該部分將會作為right-content.vue組件頁面的容器 -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style>

</style>

上面的代碼展示效果圖如下：

下面將使用上面Element-ui的Container布局容器的代碼段對其改造，將對應的頭部、側欄、主內容部分、尾部分挪入容器中，改造后的base-view.vue組件頁面代碼，如下：

<template>
  <!-- 瀏覽器顯示 ①頂部內容部分 ②左側導航欄部分 ③右側內容部分（嵌套了right-content.vue組件頁面的內容部分） -->
  <div>
    <el-container>
      <el-header>①頂部內容部分</el-header>
      <el-container>
        <el-aside width="200px">
          <!--瀏覽器頁面顯示內容 ②左側導航欄部分 -->
          <div class="nav">
            <router-link to="/login/login">登錄</router-link>
            <br>
            <router-link to="/content/manage-article">文章管理</router-link>
            <br>
            <router-link to="/content/manage-comment">評論管理</router-link>
            <br>
            <router-link to="/content/manage-image">圖片管理</router-link>
            <br>
            <router-link to="/content/post-article">發表文章</router-link>
            <br>
            <router-link to="/index">儀表盤</router-link>
            <br>
            <router-link to="/operation/manage-category">分類管理</router-link>
            <br>
            <router-link to="/operation/manage-loop">輪播圖管理</router-link>
            <br>
            <router-link to="/settings/friend-link">友情鏈接</router-link>
            <br>
            <router-link to="/settings/website-info">網站資訊</router-link>
            <br>
            <router-link to="/user/admin-info">管理員資訊</router-link>
            <br>
            <router-link to="/user/email">郵件</router-link>
            <br>
            <router-link to="/user/list-user">管理員串列</router-link>
            <br>
            <router-link to="/user/reset-password">重置密碼</router-link>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <div class="content">
              <!--瀏覽器頁面顯示的內容 ③右側內容部分，該部分將會作為right-content.vue組件頁面的容器 -->
              <router-view></router-view>
            </div>
          </el-main>
          <el-footer>南京星火燎原科技有限公司</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 35px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}
</style>

其中<style></style>標簽中的樣式也是復制element-ui中“顯示代碼”’中的樣式代碼，

app.vue中代碼：添加了內外邊距設定為0

<template>
  <div id="app">
    <!-- 用于加載顯示基礎組件頁面base-view.vue的容器 -->
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
 *{
   margin: 0;
   padding: 0;
 }
</style>

改造后的布局效果如下：

好了，這里只是簡單的使用總結！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/243636.html

標籤：區塊鏈

上一篇：【筆記】移植C的GNU Go到網頁版

下一篇：01.準備作業