系列文章
vue 学习 01 —— 基本语法
vue 学习 02 —— vue-cli项目、Webpack、vue-router
vue 学习 03 —— ElementUI
七、Vue+ElementUI
文档：https://element.eleme.cn/#/zh-CN/component/installation
1、创建工程hello-vue
2、安装依赖
# 进入工程目录
cd hello-vue
# 安装vue-router
npm install vue-router --save
# 安装element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加载器
#先安装镜像
npm config set registry https://registry.npm.taobao.org
#再安装sass-loader和node-sass(node.js的版本是14才行)
cnpm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
# 启动测试(去localhost:8080看看能否成功)
npm run dev
npm解释：
-
npm install moduleName：安装模块到项目目录下 -
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到哪个位置要看npm config prefix ...设置的路径 -
npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令缩写 -
npm install -save-dev moduleName：–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写。
3、用IDEA打开该项目，删除自带的Hello.vue
- assets：用于存放资源文件
- component：用于存放Vue功能组件
- views：用于存放Vue视图组件
- router：用于存放vue-router配置
1、登录页面
-
创建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" @click="onSubmit('loginForm')">登录</el-button> <el-button>取消</el-button> </el-form-item> </el-form> <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%"> <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{ xx }和data(){ return{xxx} }区别：前者的数据在全局有效；后者里的变量只在当前组件有效，不会影响其他组件。 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-fouter 路由到指定页面(登录成功就跳到首页） 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: #e0e1ee; } </style> -
创建Main.vue
<template> <h1>首页</h1> </template> <script> export default { name: "Main" } </script> <style scoped> </style> -
创建router/index.js
import Vue from 'vue' import VueRouter from "vue-router" import Main from '../views/Main' import Login from "../views/Login"; Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: '/login', component: Login }, { path: '/main', component: Main } ] }) -
修改App.vue
<template> <div id="app"> <!-- 显示视图 --> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> -
修改main.js
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' //这就是刚刚导入sass的原因 import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); Vue.use(router); /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
效果：在Terminal中输入npm run dev
2、路由嵌套
1、添加子组件：
user/List.vue
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "List"
}
</script>
<style scoped>
</style>
user/Profile.vue
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "Profile"
}
</script>
<style scoped>
</style>
2、增加子组件路由：修改index.js
import Vue from 'vue'
import VueRouter 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(VueRouter);
export default new VueRouter({
routes: [
{
path: '/login',
component: Login,
},
{
path: '/main',
component: Main,
//添加子组件路由
children: [
{path: '/user/profile', component: UserProfile},
{path: '/user/list', component: UserList}
]
}
]
})
3、修改Main.vue
<template>
<div>
<el-container>
<!-- 侧边栏 -->
<el-aside width=200px>
<!-- 默认展开第一个子菜单 -->
<el-menu :default-openeds="['1']">
<!--第一个子菜单-->
<el-submenu index="1">
<!--子菜单的名字 -->
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<!-- 子菜单的内容 -->
<el-menu-item-group>
<!-- 第一个子菜单的第一个项目 -->
<el-menu-item index="1-1">
<!-- 路由链接：点击后会在router-view显示其内容 -->
<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-caret-right></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: left; font-size: 20px">
<el-dropdown>
<i class="el-icon-setting" style="margin-left: 25px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息123</el-dropdown-item>
<el-dropdown-item>退出登录123</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<!-- 主要内容 -->
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style lang="scss" scoped>
.el-header {
background-color: #65a2d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
效果：
3、参数传递和重定向
这里参考的博客：vue-router中 query传参和params传参的使用和区别
-
query传参
路由：
var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } ] })导航：
// 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象 <router-link to="/login?id=10&name=zs">登录</router-link> <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link> 或 <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link> 等同于： this.$router.push('/login?id=10&name=zs') this.$router.push({path:'/register',query:{id:5,name:'lili'}}) 或 this.$router.push({name:'register',query:{id:5,name:'lili'}})注意：query可以通过name或path来引入路由
-
param传参
路由：
var router = new VueRouter({ routes: [ { path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据 { name:'register', path: '/register/:id/:name', component: register } ] })导航：
// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象 <router-link to="/login/12/ls">登录</router-link> <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link> 等同于： this.$router.push('/login/12/ls') this.$router.push({name:'register',params:{id:10,name:'lili'}})注意：params只能通过name来引入路由，path会undefined
两者区别：
-
用法上:
- 上文已经提到query可以用name或path来引入
- params必须用name来引入，接收参数都是类似的，分别是:
this.$route.query.name和this.$route.params.name
-
地址栏表现形式上:
query：/login?id=10&name=zcyparams：
/login/10/zcy
注意：这里的10和zcy对应的是/:id/:name，这两个参数可以不写，那么就不会在地址栏上显示，但如果刷新页面参数会消失。写上参数刷新页面，参数不会消失。
修改Main.vue代码：
修改路由index.js代码：
修改Profile.vue和List.vue，获取参数并显示：
效果：
4、路由模式与404
路由模式有两种：
- hash：路径带 # 符号，例如
http://localhost/#/login - history：路径不带 # 符号，例如
http://localhost/login
修改路由配置的代码如下：
export default new VueRouter({
mode: 'history',
routes: [
...
]
})
404：
在路由中添加一个组件NotFound，然后将路径写为*即可。（NodFound组件需要自己写）
5、路由钩子与异步请求（Ajax）
钩子函数：当执行某个操作时会进入该函数。类似于后端的拦截器。
- to：路由将要跳转的路径信息
- from：路由跳转前的路径信息
- next：路由的控制参数
- next() 跳转到下一个页面
- next(’/path’)跳转到指定页面
- next(false) 返回原来页面（不跳转）
- next((vm)=>{})仅在beforeRouteEnter可用，vm是组件实例
Axios
1、安装Axios：cnpm install --save axios vue-axios
2、在main.js中导入：
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios);
3、准备数据：static/mock/data.json（自己创建该路径的文件）
{
"name":"love似baby",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "天安门",
"city":"北京",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
3、使用(和Ajax类似)
效果：
833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
