vueelementUI_0">vue-elementUI
能快速的让网站上线
直接看官方文档,里面的文档很详细
https://element.eleme.cn/#/zh-CN
-
直接全部从头来一遍
-
-
vue-router自己安装的时候老是容易出问题
-
直接让他默认安装
-
C:\Users\haoyun\Desktop\vue\vue-elementUI>npm i element-ui -S
-
安装elementUI
-
安装SASS加速器
-
cnpm install sass-loader node-sass --save-dev
-
启动测试一下npm run dev
-
-
Main.vue
-
vue"><template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style>
-
Login.vue
-
vue"><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>
-
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 } ] })
-
main.js
-
import ElementUI from 'element-ui'; /*需要加SASS*/ import 'element-ui/lib/theme-chalk/index.css'; import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false Vue.use(router) Vue.use(ElementUI); new Vue({ el: '#app', router, /*给谁渲染*/ render: h => h(App), })
-
App.vue
-
vue"><template> <div id="app"> <h1>测试</h1> <router-link to="/login">login</router-link> <router-link to="/main">main</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script>
-
-
-
提示框
-
输入正确会跳转到Main页面
-
路由嵌套
对于组件来说只是对局部的改变
-
主要流程
- 创建两个组件
- 路由注册两个组件
- 首页通过路径点击事件通过路由找到组件,将组件渲染上去
-
-
List.vue
-
vue"><template> <h1>用户列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>
-
index.js
-
import Vue from 'vue' import Router from 'vue-router' import Main from "../views/Main"; import Login from "../views/Login"; import UserList from "../Views/user/List" import UserProfile from "../Views/user/Profile" Vue.use(Router) export default new Router({ routes: [ { path: '/main', component: Main, children:[ { path:"/user/profile", component:UserProfile },{ path:"/user/list", component:UserList } ] },{ path: '/login', component: Login } ] })
-
Main.vue
-
vue"><template> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i>用户管理 </template> <el-menu-item-group> <el-menu-item index="1-1"> <router-link to="/user/profile">个人信息</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/user/list">用户列表</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i>内容管理 </template> <el-menu-item-group> <el-menu-item index="2-1">分类管理</el-menu-item> <el-menu-item index="2-2">内容列表</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template> <style> .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> <script> export default { data() { const item = { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }; return { tableData: Array(20).fill(item) }; } }; </script>
-
-
个人信息绑定了/user/profile,就会通过路由找到/main路径下的/user/profile对应的组件
-
vue"><el-menu-item index="1-1"> <router-link to="/user/profile">个人信息</router-link> </el-menu-item>
-
{ path: '/main', component: Main, children:[ { path:"/user/profile", component:UserProfile },{ path:"/user/list", component:UserList } ] }