15.Vue+ElementUI

15.Vue+ElementUI

官方文档

https://element.eleme.cn/#/zh-CN/component/installation

安装部署

​ 1.npm方式

npm i element-ui -S

​ 2.CDN方式

目前可以通过 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>

使用

1. 首先通过npm配置

   npm i element-ui -S
   #安装sass-loader与node-sass
   cnpm install sass-loader node-sass --save-dev 
   

2. 启动测试

   npm run dev -watch
   

3. 配置路由

   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
       }
     ]
   })
   

4. 配置main.js

   import Vue from 'vue'
   import App from './App'
   import router from "./router"
   //导入ElementUI 以及其 CSS(需要SaaS编辑器)
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(router);
   Vue.use(ElementUI);
   Vue.config.productionTip = false
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     components: { App },
     router,//路由配置
     render: h => h(App) //ElementUI配置 , 官方写法
   })
   

5. 配置Login页面 (通过ElementUI)

   <template>
     <div>
       <!--el-form一个表单，两个输入框-->
       <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>
           <!--登陆按钮绑定了一个onSubmit事件-->
           <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:''
         },
         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){
             /*如果引用成功了，会去router中push到main，这种方式称为编程式导航*/
             this.$router.push("/main");
   
           }else {
             this.dialogVisible=true;
             return false;
           }
         });
       }
     }
   }
   </script>
   

6. 配置App.vue

   <template>
     <div id="app">
       <router-link to="/login">登录页面</router-link>
       <router-view></router-view><!--显示router-->
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>