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: ''
})

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="width: 40%; margin-left: 400px">
      <el-form
        :model="userForm"
        :rules="userRules"
        label-width="120px"
        ref="userForm"
        size="small">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="userForm.username"
            placeholder="请输入用户名"
          >el-input>
        el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="userForm.password"
            placeholder="请输入密码"
          >el-input>
        el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userForm.sex" placeholder="请选择">
            <el-option value="1" label="男">el-option>
            <el-option value="2" label="女">el-option>
            <el-option value="0" label="保密">el-option>
          el-select>
        el-form-item>
        <el-form-item label="兴趣爱好" prop="interestArray">
          <el-checkbox-group v-model="userForm.interestArray">
            <el-checkbox
              :label="item"
              v-for="item in list"
              :value="item"
              :key="item"
            >el-checkbox>
          el-checkbox-group>
        el-form-item>
        <el-form-item label="出生年月" prop="birth">
          <el-date-picker
            v-model="userForm.birth"
            placeholder="请选择"
            value-format="yyyy-MM-dd"
          >el-date-picker>
        el-form-item>
        <el-button
          type="primary"
          @click="submit()"
          >提交el-button
        >
      el-form>
    div>
  div>
template>

css代码和Javascript代码仍然可以使用，我们使用的是ES6以上规范的Javascript代码，ElementUI表单验证是这样的使用的

<script>
export default {
  name: 'Register',
  data() {
    return {
      msg: '欢迎进入注册登录系统',
      list: ['上网', '唱歌', '游泳', '健身', '表演'],
      userForm: {
        username: '',
        password: '',
        sex: '',
        interestArray: [],
        birth: ''
      },
      userRules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            pattern: /^[a-zA-z]{1}[a-zA-z\d]{5,11}$/,
            message: '用户名由数字或字母组成6-12位，且首位必为字母',
            trigger: 'blur'
          },
          {
            validator: checkUsername,
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            pattern: /^[a-zA-z\d]{6,12}$/,
            message: '密码由数字或字母组成6-12位',
            trigger: 'blur'
          }
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        interestArray: {
          required: true,
          message: '兴趣爱好至少选择一样',
          trigger: 'blur'
        },
        birth: { required: true, message: '出生年月不能为空', trigger: 'blur' }
      }
    }
  },
    submit () {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
        	//路由器跳转页面
             this.$router.push('/Message')
        } else {
          return false
        }
      })
    }
  }
}
</script>

有关ElementUI更多使用可以查看官方文档：Element官方地址
以下是ElementUI实现效果展示

登录页面展示

这里登录使用提交方式为http方式提交到后台，官方推荐使用axios，个人认为http方式提交和axios提交在代码编写上没有本质区别

this.$http.post('/api/user/login', this.loginForm).then((resp) => {
        //resp.data返回数据
        var msg = resp.data.msg
        if (msg === 'success') {
          this.$router.push('/main')
        } else {
          //消息提示 type:error 错误提示 ,message 消息内容
          this.$message({type: 'error', message: msg})
        }
      })

11.启动项目
终端进入项目路径后输入：npm run dev
如果显示以下信息表示项目成功启动

直接访问 http://localhost:8080
12.结束语
希望有更多的程序员能使用VUE和ElementUI，您一定会觉得vue开发更简单更省事，看完本篇一定对您有很大的帮助！!
关于后台代码见下一篇博文Springboot后端