12.0、vue+elementUI的学习与使用

12.0、vue+elementUI

第一步：首先创建一个项目hello-vue ，执行vue init webpack hello-vue

安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件

#首先创建一个项目hello-vue
vue init webpack hello-vue
# 进入工程目录
cd hello-vue
#安装 vue-router
npm install vue-router --save-dev
#安装 element-ui
npm i element-ui -s
#安装依赖
npm install
#安装SASS加载器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

        在安装完SASS加载器后可能会因为安装的SASS加载器版本过高而报错，这时候我们需要将

package.json中的"sass-loader": "^12.6.0",版本改为"sass-loader": "^7.3.1"即可成功运行。

第二步：创建一个Login组件，在ElementUI官网上找了一个表单组件Component拿过来测试一下

Login.vue文件

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
export default {
  data () {
    return {
      numberValidateForm: {
        age: ''
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

第三步：在路由的index.js文件中

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/Content'
import Main from '../components/Main'
import Login from '../components/Login'

Vue.use(Router)
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/Login',
      name: 'Login',
      // 跳转的组件
      component: Login
    }
  ]
})

第四步：在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(router)
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 配置路由
  router,
  render: h => h(App)// ElementUI，给App.vue文件进行渲染，由于有路由的原因可以直接实现
})

第五步：在App.vue文件中

<template>
  <div id="app">
    <router-link to="/Login">登录</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>