知识点12--在vuecli项目的基础上用npm方式使用element ui

知识点11中介绍了如何使用vuecli搭建项目，那么本章知识点为大家介绍如何在vuecli搭建的项目中使用npm下的element ui

不要在vuecli项目中，如普通html项目中那样直接引用官方路径使用element ui，两种方式是不一样不相互通用

第一步：你需要在那个项目中cmd窗口下，切换到项目路径下

第二步：在项目路径下使用局部安装命令为当前项目安装element ui

第三步：下载完成后，你就可以在项目的package.json配置文件中看到element ui的版本信息了

第四步：在项目的main.js文件中加入如下代码，引入完整的element ui

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

Vue.use(ElementUI)

除了全部引用，你也可以单个的引用，见官网

---

这时你就可以正常使用了，借此机会也给大家演示一下如何开发一个vuecli项目的页面

第一步：在views路径下，创建一个自定义的vue后缀文件，你如果用的是Hbuilder会有模板的，我这里文件名为users

<template>
	<div>
		<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>
</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 弄'
				}]
			}
		}
	}
</script>

<style>
</style>

上面的这个代码，js部分就不像知识点10里面那样只cv了数据部分，而是全部cv过来了，这个是固定的格式

第二步：在src/router/index.js下注册你的路径，其实人家自带的代码中已经给你示范了两种写法，我们随便用一种改成自己的就行

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/users',
    name: 'users',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/users.vue')
  }
]

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

export default router

第三步：我们就不另外建首页了，沿用自带的App.js，在其中导航栏部分写入自己的标签

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
	  <router-link to="/users">user</router-link>
    </nav>
    <router-view/>
  </div>
</template>

第四步：如果你用的是Hbuilder那就不需要，但如果你用的是其他的工具那就需要看一下是否重启项目，Hbuilder会给你自动重启项目，重启后浏览器访问首页，点击user选项


这就是在vuecli项目中自己写代码的方式