大前端进阶-14-vue.js-vue+elementUI

安装

cmd-npm安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

CDN-(建议使用npm安装)
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

执行其他命令

初步代码：

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="text" placeholder="请输入密码" v-model="form.password"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('loginForm')">登录</el-button>
        </el-form-item>
      </el-form>

      <el-dialog
        title="温馨提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <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: '',
            },

            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>

</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';

import router from './router';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(router);
Vue.use(Element);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h =>h(App) // Element
})

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: '/main',
            component: Main

        },
        {
            path: '/login',
            component: Login
        }
    ]
});

App.vue

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

<script>

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

结果

因为设置了路由

路由嵌套

嵌套路由 又称 子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样的，url中各段动态路径也按照某种结构对应嵌套的各层组件