使用HBuilderX-普通项目之vue-cli默认项目开发前端（二）

第二步：使用element-ui和vue-router

一、安装element-ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。element-ui是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI （没有使用过）。

选中当前vue-cli-demo项目，打开控制台，输入后回车安装即可。

npm i element-ui -S

二、安装vue-router

HbuilderX创建的vue-cli模板文件中没有vue-router,需要我们自己添加。

vue-router简单的来说，就是用来控制页面跳转的。

选中当前vue-cli-demo项目，打开控制台，输入后回车安装即可。

npm install vue-router

安装完成后，可以在package.json文件中看到安装成功的依赖。

三、配置router

1、在项目的src目录下创建一个router目录，在router目录下新建一个index.js文件。

2、router目录下的index.js文件模板：

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来


Vue.use(VueRouter)

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [];

// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
    routes
})

export default router

3、src目录下的main.js文件模板：

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

Vue.config.productionTip = false //消息提示的环境配置，设置为开发环境或者生产环境,当前为开发模式

Vue.use(ElementUI) //全局引入ElementUI

// 4. 创建和挂载根实例。
new Vue({
	router,//通过 router 配置参数注入路由， 从而让整个应用都有路由功能
	render: h => h(App),
}).$mount('#app')

4、src目录下的App.vue文件模板：

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

<script>
</script>

<style>
</style>