常用的：prevent 阻止事件默认行为；stop 阻止事件冒泡；once 事件执行一次
cookie是储存你在浏览页面所产生得关键信息, token是做校验的
assets文件夹 放多个组件共用的静态资源
1、登录注册组件静态完成（建议使用element-ui的表单验证）
1.1、导入组件
1.2、修改内部图片地址等错误（像多个组件都用的图片可以单独提出来放到assets文件夹里）
1.3、配置路由
2、注册部分--验证码部分
需要填写手机号，点击按钮时把手机号发给后台，同时获取验证码
1.1、要获取表达数据，得用v-model，使用先在data里创建对象接收数据
1.2、查看开发文档，在vscode里写api（带参）
1.3、新建store仓库user（登录、注册都写这），先到大仓库中合并+注册，后引入api+三连环
1.4、在注册组件中设置点击事件，发布action订单
3、注册部分--剩下部分
1、data里创建密码和确认密码部分 与html部分v-model相绑定，用于收集和对比
2、根据开发文档的注册部分，写api
记得这里是post方法要写data的
3、仓库api引入+三连环
4、设置点击事件，动态展示 （点击 完成注册）
4、登录部分
1、v-model动态获取用户输入的手机号和密码
2、根据开发文档，写api
3、user仓库引入api+三连环
4、组件内派发action
5、登录成功后修改状态
--》 
1、根据开发文档，写api
2、 把用户的token带给api的请求拦截器
登录成功后，通过请求头把用户的token带给服务器，不然它会显示未登录（原先的请求头是UUID生成的那个）
如果请求头是uuid会显示未登录，请求头是用户的token则显示成功
2、在user仓库里引入api+三连环
3、动态展示——发生action请求
如上所示，header组件的这里有两种状态，所以我们可以用v-if（或v-show）来切换
仓库里如果有userInfo则代表用户已经登录，我们可以把这个作为判断的条件，
userInfo下有个name（或者loginName），我们可以把它作为登录成功时显示的名字
这时候可以正常显示用户登录信息了，但是一刷新就有未登录了，原因是没有持久化，需要用localStorage本地存储
注意：vuex仓库储存数据（不是持久化）
用户的userInfo登录是在登录页面点击登录时才触发的，
刷新的话没有点击登录按钮所以会回到未登录状态
6、退出登录
给按钮设置点击事件编写方法（logout）
方法需要：1、发请求通知服务器退出登录，清理token
2、清理项目中的数据【userInfo、token、本地存储】
1、根据文档写api
2、引入api+三连环
3、设置点击事件、派发action
7、解决无法持久化存储的问题
token可以单独放到utils文件夹里（对外暴露）
上面这里原本是token：’ ‘ ，现在改成这样，在最开始的时候本地存储没有TOKEN，所以也是null
也就是一样，等登录以后在action把token存到了浏览器，这时候本地存储也就有了，state里的
token也就成了用户的唯一token值
目前存在的问题（解决方法：导航守卫）：
本地存储只在home首页生效，search。。。页面不生效？
原因：只在Home组件发送了getUserInfo请求
解决方法：
在路由里通过全局前置守卫来限制路由跳转
我们要限制的是如果store仓库里有token的时候（也就是用户登录了），让前置守卫不放行到登录页面
// router index.js全局前置守卫代码
// 设置全局导航前置守卫
router.beforeEach(async(to, from, next) => {
let token = store.state.user.token
let name = store.state.user.userInfo.name
//1、有token代表登录，全部页面放行
if(token){
//1.1登陆了，不允许前往登录页
if(to.path==='/login'){
next('/home')
} else{
//1.2、因为store中的token是通过localStorage获取的，token有存放在本地
// 当页面刷新时，token不会消失，但是store中的其他数据会清空，
// 所以不仅要判断token,还要判断用户信息
//1.2.1、判断仓库中是否有用户信息，有放行，没有派发actions获取信息
if(name)
next()
else{
//1.2.2、如果没有用户信息，则派发actions获取用户信息
//这里派发了action请求，所以home组件那里的派发请求可以删除了
try{
await store.dispatch('getUserInfo')
next()
}catch (error){
//1.2.3、获取用户信息失败，原因：token过期
//清除前后端token，跳转到登陆页面
await store.dispatch('logout')
next('/login')
}
}
}
}else{
//2、未登录，首页或者登录页可以正常访问
if(to.path === '/login' || to.path === '/home' || to.path==='/register')
next()
else{
alert('请先登录')
next('/login')
}
}
})
到这我们可以发现，
问题1解决了，因为导航守卫如果发现登录了，但没有用户信息，根据if判断里面，会自动store.dispatch('getUserInfo')发生请求。
问题2解决了，在导航守卫里我们通过多个if来判断划分了各种可能性，在代码里的1.1我们可以看到，当to.path==='/login' 时，他不会去登录页，而是会到 next('/home') 首页。
这里引用一下别人的图，原地址：尚品汇项目笔记_毛毛虫呜呜的博客-CSDN博客_尚品汇项目
补充：
1、导航守卫
2、图片懒加载（vue2用1.3.3版本的 ，vue3 安装 npm i vue3-lazy -D）
3、路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
推荐：路由懒加载，不用单独引入，直接
component: ()=> import('../pages/AddCartSuccess'),
优点：当路由被访问的时候才加载对应组件
//添加购物车成功
{
path: "/addcartsuccess",
name: 'AddCartSuccess',
component: ()=> import('../pages/AddCartSuccess'),
meta:{show: true},
},
//以前的方法：需要先引入所有组件再配置路由，
//引入组件
import AddCartSuccess from '@/pages/AddCartSuccess'
import Home from '@/pages/Home'
//配置路由
export default new VueRouter({
//配置路由
routes: [
{
name: 'addCartsuccess',
path: '/addCartsuccess',
component: AddCartSuccess,
meta: { show: true }
},
]
})4、打包上线
在项目文件夹下执行
npm run build。会生成dist打包文件，把这个发给后端就ok了
dist文件下的js文件存放我们所有的js文件，并且经过了加密，并且还会生成对应的map文件。
map文件可以向未加密的代码一样，准确的输出是哪一行那一列有错。
如果不需要可以在vue.config.js配置productionSourceMap: false即可。
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
