目录
一、elementui使用
网址：https://element.eleme.cn/#/zh-CN/component/installation
下载插件
cnpm isntall -S [email protected]
vue界的ui库
Element Plus 经典中的经典，全面支持 Vue 3
Vant 3 - 有赞团队开源移动 UI 组件库，全面支持 Vue 3：https://vant-contrib.gitee.io/vant/#/zh-CN
TDesign - 鹅厂优质 UI 组件，配套工具完满，设计工整，文档清晰
Ant Design Vue - 阿里前端 UI 库，面向企业级中后台
iView：
二、vuex的使用
1.概念
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2.何时使用？
多个组件需要共享数据时
3、使用步骤：
第一步：
state: {
num:10
},
第二步：
methods:{
handleAdd(){
// 1.直接操作
// console.log('111')
// this.$store.state.num+=1
// 2.正统操作，通过dispatch触发actions
this.$store.dispatch('add',2) // add必须是actions里面的函数
}
}
第三步：
actions: {
// 至少要有一个参数，context上下文对象，触发mutations中的函数执行，或者直接改state中的数据都可以
add(context,count){
// 使用commit，触发mutations中的函数
console.log(context)
console.log(count)
context.commit('mAdd',count)
}
},
第四步：
mutations: {
mAdd(state,count){
console.log(state)
console.log(count)
state.num = state.num+=count
}
},
三、Router使用
提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转
1 简单使用
-页面跳转（咱们之前学过了）
-写个页面组件
-在router--->index.js--->routes数组中加入一个路由即可
2 组件中实现页面跳转
-两种方式
-方式一：使用 router-link 标签，to 地址
<router-link to="/about"></router-link>
-方式二：js控制
this.$router.push('/about')
3 路由跳转时，可以使用对象
-1 通过对象跳转路由name形式： <router-link :to="{name:'about'}">
-2 通过对象跳转路由path形式： <router-link :to="{path:'/about'}">
-3 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
-4 在另一个页面中取出地址栏中数据：console.log(this.$route.query)
-5 这种传递方式和 3 一样 <router-link to="/about?name=lqz&age=19">
-6 注意区分：
this.$route：当前路由对象，当前路径，取传递数据。。。
this.$router：整个路由对象，主要做跳转用
-7 路径中分割出 参数
-配置：
{
path: '/detail/:pk',
name: 'detail',
component: DetailView
},
-在路由中取：
this.$route.params.pk
-8 路由跳转时，使用 7 的样子
-this.$router.push({name: 'detail', params: {pk: 999}})
-<router-link :to="{name:'detail',params:{pk:88}}">
4 this.router 的一些方法
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由
四、多级路由
使用步骤：
- 1 新建一个页面组件（LqzView），配置路由
{
path: '/lqz',
name: 'lqz',
component: LqzView,
},
2 在页面中，想再显示页面组件，实现点击切换的效果
<h1>lqz页面</h1>
<router-link to="lqz01">
<button>lqz-01</button>
</router-link>
<router-link to="lqz02">
<button>lqz-02</button>
</router-link>
<router-view>
# 以后这里变换页面组件，多级路由
</router-view>
-3 新建两个页面组件，Lqz01.vue，Lqz02.vue，配置路由children
{
path: '/lqz',
name: 'lqz',
component: LqzView,
children: [ //通过children配置子级路由
{
path: 'lqz01', //此处一定不要写：/news
component: Lqz01
},
{
path: 'lqz02',//此处一定不要写：/message
component: Lqz02
}
]
},
五、路由守卫和两种工作模式
路由守卫
前置路由守卫，再进入路由之前做判断
写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from)
// 要是访问lqz01，都不能跳转'
// 如果没有登录，不能访问
if (to.path == '/lqz/lqz01') {
alert('你灭有权限')
} else {
next() # 继续访问
}
路由器的两种工作模式
- 1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
- 2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
- 3 hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。 - 4 history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
六、localstorage和sessionstorage,和cookie
前端存储数据
- 登录成功，有token，存本地
- 不登陆加购物车
前端可以存数据的位置：
localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
sessionstorage：只在当前会话生效，关闭浏览器，就没了
cookie：有过期时间，到了过期时间，自动删除
都是在浏览器存储数据的--》存数据有什么用？
-登录成功 token存在本地
-不登录加入购物车功能，迪卡侬存在了localStorage中
-组件间通信----》 跨组件
localStorage
-永久存储，除非清空缓存，手动删除，代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
sessionStorage
-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
cookie
-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')