Vue结合Element UI实战

创建工程

1. 创建一个名为hello-vue的工程

  vue init webpack hello-vue

2. 安装依赖

需要安装 vue-router、element-ui、sass-loader和node sass 四个插件

  # 进入工程目录
  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
  # 启动测试,需将package.json中的sass-loader版本改为7.3.1 , node-sass改为4.14.1
  npm run dev

3. Npm指令解释

npm install moduleName：安装模块到项目下
npm install -g moduleName：-g的意思是将模块安装到全局
npm install -save moduleName：-save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
npm install -save-dev moduleName：--save-dev的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D为该命令的缩写

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.use(router);
  Vue.use(ElementUI);

  new Vue({
    el: '#app',
    router,
    render: h => h(App) //ElementUI
  })

index.js(路由配置)

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

  Vue.use(Router)

  export default new Router({
    routes: [
      {
        path: "/login",
        component: Login
      },
      {
        path: "/main",
        component: Main
      }
    ]
  });

Login.vue

    <template>
      <div>
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
          <h3 class="login-title">欢迎登录</h3>
          <el-form-item label="账号" prop="username">
            <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
          </el-form-item>
        </el-form>

        <el-dialog
          title="温馨提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>请输入账号和密码</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>

    <script>
      export  default {
        name:"Login",
        data(){
          return {
            form: {
              username: '',
              password: ''
            },
            //表单验证，需要再el-form-item 元素中增加prop属性
            rules: {
              username:[
                       {required:true,message:'账号不能为空',trigger:'blur'}
                        ],
            password:[
                  {required: true,message: '密码不能为空',trigger:'blur'}
                  ]
        },
          //对话框显示和隐藏
          dialogVisible:false
        }
        },
        methods:{
          onSubmit(formName) {
            //为表单绑定验证功能
            this.$refs[formName].validate((valid) =>{
              if (valid){
                //使用 vue-router路由到指定页面，该方式称之为编程式导航
                this.$router.push("/main");
              } else {
                this.dialogVisible = true;
                return false;
              }
            });
          }
        }
      }
    </script>

    <style lang="scss" scoped>
      .login-box{
        border: 1px solid #DCDFE6;
        width: 350px;
        margin:180px auto;
        padding:35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow:0 0 25px #909399;
      }

      .login-title{
        text-align:center;
        margin:0 auto 40px auto;
        color:#303133;
      }
    </style>

App.vue

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

<script>

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

Main.vue

<template>
  <h1>首页</h1>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>

</style>