vue2.0前端框架搭建+ElementUI

vue2.0是我们国人研发的前端框架，是基于ECAMScript6.0以上的版本进行开发的，之前我们使用的Javascript是5.0版本，2015年推出了ECAMScript6.0（简称ES6），之后每年升级一个版本，所以VUE框架使用的是ES6以上的标准，现在我开始教大家搭建VUE2前端框架。
首先下载NodeJS，在浏览器中输入：nodejs.cn，进入下载页面
1.选择合适的版本进行安装
输入命令

nodejs和npm都安装成功!!
2.安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装全局vue-cli脚手架
npm install -g @vue-cli
4.初始化vue2框架
创建工作空间目录，如：D:\space
进入目录，执行命令：vue init webpack demo[项目名]，等待一段时间下载文件，然后进行选择，选择标准安装，不选择安装npm等其他插件，完成后执行cd 项目名，再执行npm install，安装其他组件，等待完成后，整个Vue项目的框架搭建就完成了。
5.下载开发软件
进行Vue开发软件推荐使用vscode，官网地址：https://vscode.en.softonic.com/，关于vscode的使用大家可以搜索相关的教程，下一步进行vue代码讲解。
6.vue项目结构目录

大家需要了解的有：vue文件，路由器，依赖包，vue文件就是一个相当于html的页面，路由器在router文件夹下，管理页面跳转的url地址，package.json是vue的依赖包，所有相关插件都自动添加到package.json里
7.安装elementUI
之前说过，vue是基于ES6.0，那么javascript在这里就没有再使用了，现在我们需要安装elementUI，这个是页面控件的展示插件，打开vscode，在终端输入：npm i element-ui -S，打开main.js文件，引入代码：

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

Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

8.修改APP.vue文件
上面的main.js代码引入了app.vue这个文件，那么我们打开app.vue这个文件，修改代码如下：

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

这段代码是使用路由器，之前说了，路由器是管理页面的，那这里就是引入了路由页面，上面代码Vue对象中el属性是需要引用的html元素，在这里是id为app的元素里的代码才有用
9.路由器
路由器管理所有访问路径和页面代码，这里我们引用了两个vue文件(一个html文件就是一个Vue)Register.vue和Message.vue，放在components文件夹下，修改路由器配置文件

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Register'
import Message from '@/components/Message'
Vue.use(Router)
Vue.use(Message)
Vue.use(Register)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Register',
      component: Register
    },
    {
      path: '/message',
      name: 'Message',
      component: Message
    }
  ]
})

这样我们就能访问到Register.vue和Message.vue
10.vue代码及elementUI标签
vue既然相当于html文件，那么它的组成还是html元素，不过不是写在body元素中，写在template元素中，也不用开头。然后是和elementUI完全整合

<template>
  <div>
    <h1>{
  { msg }}</h1>
    <div style