name: 'HelloWorld',
data () { //由于是组件，data必须是个函数，这是ES6写法，data后面加括号相当于data: function () {}
return { //记得return不然接收不到数据
msg: 'Welcome' //上面的 msg 就是这里输出的
}
}
}
</script>
<style>
h1 {
font-weight: normal;
}
a {
color: #42b983;
}
</style>
到这里用了点ES6语法，如果对export和import不了解的，建议看看相关的介绍，暂时不想看也可以照着敲代码。不过建议还是看看，只需10分钟了解下export和import就好—— 阮一峰ECMAScript 6 入门
可以看到，之前打开的页面变了样：
####现在我们来安装一下element-ui（关于element-ui详细情况请自行搜索）
可以按照官方方法使用npm i element-ui -S命令进行安装
也可以在package.json中添加，后通过cnpm install进行安装
选择2，打开package.json，找到devDependencies并在最后加上”element-ui”: “^2.2.1”
"devDependencies": {
...
...
"element-ui": "^2.2.1"打开命令行停止服务，再通过
cnpm install进行安装，安装完成后
npm run dev启动打开main.js在里面添加三行内容
import ElementUI from 'element-ui' //新添加
import 'element-ui/lib/theme-chalk/index.css' //新添加，避免后期打包样式不同，要放在import App from './App';之前
import Vue from 'vue'
import App from './App'
import router from './router'Vue.use(ElementUI) //新添加
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
添加了这三行，我们就可以使用element-ui了
接下来在components文件夹内新建一个NewContact.vue 文件，添加如下代码
<template>
<el-row>
<el-button type="success">1</el-button>
</el-row>
</template>
<script></script>
<style>
</style>
打开之前的HelloWorld.vue对内容进行修改（router是官方路由插件，router-link to是router的语法）：
<template>
<!-- 这里router-link to="newcontact"会把路由导航到http://localhost:8080/#/newcontact -->
<router-link to="newcontact"><h1>{{ msg }}</h1></router-link>
</template>
打开router/index.js，添加新路由（router是官方路由插件，深入学习请查看文档）
