Vue实践 在Vue中使用组件库element进行开发主要流程以及注意事项

---

本文为第二课，如果有兴趣看先查看，第一课，新建一个vue项目
运行Vue项目全流程创建的第一个项目-新手必看

• 前提

在已经创建vue项目的基础上进行开发

参考：运行Vue项目全流程创建的第一个项目-新手必看

• 效果提前查看
  

---

一、打开element网站

vue: 渐进式JS框架
element：ui框架

本文：vue+element 进行描述

https://element.eleme.cn/#/zh-CN

二、安装 element 指导进行安装

2.1 把 element 安装到项目中

注意1：安装, 到vue项目根目录

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

PS D:\JAVA\qd\ccz-vue> npm i element-ui -S
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions
...
+ element-ui@2.15.3
added 10 packages from 9 contributors in 2.928s

注意2：安装完可以在 package.json 可以看到所有的依赖，看不到表示安装失败

注意：
dependencies：依赖会打包dist文件中。
devDependencies：依赖不会打包到dist文件中。

总结：
项目一直需要它，放dependencies；而webpack是为了方便打包上线，打包上线后就用不到了，放devdependencies。

2.1 把 element 引入使用

注意三：按需加载 和 完整引入，涉及到页面加载的问题，后期需要注意，下面演示 完整引入

完整引入
在 main.js 中写入以下内容：

修改main.js，为了方便学习，可以整个复制黏贴过去

import Vue from 'vue';
import ElementUI from 'element-ui'; //element元素
import 'element-ui/lib/theme-chalk/index.css'; //element css元素
import App from './App.vue';
import router from './router'; //路由必须

Vue.use(ElementUI);

new Vue({
  router, //路由使用
  el: '#app',
  render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

2.2 由于为了方便新手的同学们，按需加载可以自行查看配置

https://element.eleme.cn/#/zh-CN/component/quickstart

2.3 题外话：注意事项

2.3.1 需要看懂 package.json 这个文件

...
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
...

对应的
npm run serve 运行项目
npm run build 构建项目
npm run lint 修复项目

三、开始运行项目，正式上手（因为vue是热加载，边修改页面，可以立即进行展示）

3.1 启动项目

执行 npm run serve

运行成功，根据提示进入页面。

项目从App.vue作为入口。

会看到 HOME 和 About 两个页面，

但是项目是从

保持项目运行，开始书写自己需要的功能

简答提示，App.vue 中 的 Home ， 实际最后会渲染成 a 标签

3.2 修改标签栏

步骤1：在根目录新增一个 vue.config.js

写入以下内容

修改vue.config.js

module.exports = {
    chainWebpack: (config) => {
        config.plugin("html").tap((args)=>{
            args[0].title="开发链接跳转...";
            return args;
          })
    }
}

步骤2：重启项目，即可看见结果

3.3 删除默认页面，进行自己的开发

删除的时候，需要把对应功能的 引入、定义、使用 一起删掉

App.vue 作为页面入口，不能删除

清理 Home.vue 多余的信息。
以下是vue最小化信息，不能再进行删除了。

修改: views/Home.vue，为了方便学习，可以整个复制黏贴过去

<template>
  <div class="home">
  </div>
</template>

<script>

export default {
}
</script>

注意下面提示，否则会报错

整个删除 About.vue，注意 router 中的 index.js 删除 About.vue 相关的信息

修改：router/index.js，为了方便学习，可以整个复制黏贴过去

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.4 选择页面主题框架

回到 element 组件库

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

为了让页面铺满，还需要做以下几个动作

修改: App.vue ，为了方便学习，可以整个复制黏贴过去

该位置为入口

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
a {
  text-decoration: none;
}
#nav {
  padding: 30px;
}
 #nav a {
    font-weight: bold;
    color: #2c3e50;    
  }
  #nav a.router-link-exact-active {
    color: #42b983;
  }
</style>

修改Home.vue，为了方便学习，可以整个复制黏贴过去

<template>
  <div class="home">
    <el-container class="layout">
      <el-aside width="200px" class="aside">Aside</el-aside>
        <el-container>
          <el-header class="header">Header</el-header>
          <el-main>
          Main
          </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
}
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
}
.layout {
  width: 100%;
  height: 100%;
}
.aside {
  background: rgb(151, 124, 172)
}
.header {
  background: rgb(100, 140, 172)
}
</style>

最终效果

接下来，就可以在

Main

Header

Aside

进行需要的开发了

四、抽取公共部位 Aside、Header

比如把 Aside、Header 等抽取出来

4.1 创建 LayoutCommon.vue 和 Dolog.vue 文件

使用 template 标签
main中需要填入 路由

== 新建 view/LayoutCommon.vue==

<template>
    <el-container class="layout">
      <el-aside width="200px" class="aside">
        <div class="logo">
          <div class="circle-logo"></div>
        </div>
        <el-menu
          :default-active="currentmenu"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b" @select="handleChangeCurrentMenu">

            <router-link to="/home">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">地址综合管理</span>
                </el-menu-item>
            </router-link>
            <router-link to="/dolog">
                <el-menu-item index="2">
                <i class="el-icon-document"></i>
                <span slot="title">执行日志</span>
                </el-menu-item>
            </router-link>

        </el-menu>
      </el-aside>
        <el-container>
          <el-header class="header" height=30px></el-header>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
    data() { //变量
        return {
            currentmenu: '1'
        }
    },
    mounted() {  //生活周期函数
        this.currentmenu = localStorage.getItem('currentmenu') ? localStorage.getItem('currentmenu') : '1'; //确定当前页面是哪一页
    },
    methods: { //调用方法
        handleChangeCurrentMenu(index) {
            this.currentmenu = index;
           localStorage.setItem('currentmenu', this.currentmenu); //保持当前页面的位置
        }
    }
}
</script>
<style scoped>
.layout {
  width: 100%;
  height: 100%;
}
.aside {
  background: #545c64;
}
/deep/.el-menu {
  border-right: 0;
}
.header {
  background: #fff;
}
.logo {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.circle-logo {
  background: #fff;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  
}
.main {
  background: #fafafa;
}

.content {
  background: #fff;
  padding: 24px; 
  min-height: calc(100% - 60px);
}
.header {
  background: #545c64;
}

</style>

• 创建 views/Dolog.vue

<template>
  <div class="home">
  执行日志查询
  </div>
</template>

<script>

export default {
}
</script>

4.2 配置路由表

比如我现在有

Dolog.vue
Home.vue
LayoutCommon.vue

以上三个文件，需要配置路由表

注意 路由表中的 redirect、children

修改：router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Dolog from '../views/Dolog.vue'
import LayoutCommon from '../views/LayoutCommon.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'LayoutCommon',
    component: LayoutCommon,
    redirect: '/home',
    children: [{
      path: '/home',
      name: 'Homme',
      component: Home
    }, {
      path: '/dolog',
      name: 'Dolog',
      component: Dolog
    }]
  }
]

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

4.3 再把 Dolog.vue、Home.vue 的 Aside、Header 删除

例如 Dolog.vue
修改：Dolog.vue

<template>
  <div class="home">
    <div class="content">
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>
export default {

    data() {
      return {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
      }
    },
    computed: {
      clientHeight() {
        return document.body.clientHeight;
      }
    },
    watch: {
      clientHeight(newValue) {
        this.cardHeight = (newValue - 204)/2;
      }
    },
    mounted() {
      this.cardHeight = (this.clientHeight - 204)/2;
    },
    methods: {
    }

}
</script>
<style scoped>

</style>

修改Home.vue

<template>
    <el-main>
    Main
    </el-main>
</template>

<script>

export default {
}
</script>
<style scoped>
</style>

以下是效果图，这样具有极强的拓展性

后记

打开vue高亮语法插件

安装