知识点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项目中自己写代码的方式