关于vue项目的注意.初级版

一.项目开启时

1. 项目的创建

 1-1 全局创建脚手架 npm i @vue/cli -g  
 1-2 使用vue指令创建项目 vue create 项目名  
 1-3 选择2.0的版本  
 1-4 创建成功后进行基础配置  
 1-5 删除脚手架项目的欢迎界面等项目无关的文件  
 1-6 创建vue.config.js文件关闭eslint语法监测  
 1-7 下载相关依赖

1. 路由的配置

 2-1 下载路由 npm i router
 2-2 配置路由 创建src/router/index.js的文件(方便后期的维护)
 配置如下
 2-3 在main.js中引入 并注入到new Vue实例中
 2-4 在app.vue配置挂载点
 2-5 可以在src/utils/request.js中配置基地址 便于后期维护

// 配置路由 
 import Vue from "vue"
 // 1、引入路由对象
 import VueRouter from "vue-router"
 // 2、使用Vue.use注册相关组件等
 Vue.use(VueRouter)
 // 3、创建路由规则
 const routes = [
     {
         path: "/login",
         // @是src这个目录的别名
         component: ()=>import("@/views/login.vue") // 按需引入
     }
 ]
 // 4、使用路由规则生成路由对象
 const router = new VueRouter({
     // routes: routes, 简写如下
     routes
 })
 // 5、导出路由对象
 export default router
 import router from "./router"
 ​
 // 6、将路由对象注入到new vue实例中
 new Vue({
   router,
   render: h => h(App),
 }).$mount('#app')

<template>
   <div>
     <!-- 设置挂载点 -->
     <router-view></router-view>
   </div>
 </template>

//封装基础路径 便于后期维护
 import axios from 'axios'
 import Vue from "vue";
 //封装基地址
 axios.defaults.baseURL = 'http://127.0.0.1:3000'
 ​
 //最后导出
 export default axios
 //在请求的接口函数中导入

二.注册登录退出状态时

1. 登录时

 1-1 登陆跳转之前 要将传入的token存到本地存储中 存储一定要在跳转组件之前(因为后面获取信息会验证到这个token的数据)
 1-2 判断的条件要写清楚 message要跟接口返回的message对应上
 1-3 token值就在请求回来的data中

1. 配置请求的拦截器

 2-1 在utils/request.js中配置

// 添加请求拦截器
 axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     let token = localStorage.getItem('token-70')
     //判断token是否存在 如果存在执行拦截
     if (token) {
     //这里配置过请求头的验证后 后面路由的配置就不用再配置
         config.headers.Authorization = token
     }
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });

三. 项目开发时

1. 操作顺序

 1-1 都是先创组件-配路由-搭布局-实现功能-优化

1. 导航守卫的配置

 2-1 导航守卫:即是在访问需要登录的页面的时候 会跳转到登录页面 如果有登录则直接跳转

 //白名单路径
 let arr = ['/personal', 'edit_profile']
 router.beforeEach((to, from, next) => {
 //判断是访问数组中的路径且没有token 直接跳转到登录页
   if (arr.indexOf(to.path) != -1 && !localStorage.getItem('token-70')) {
     next('/login')
     Toast.fail('请先登录');
   } else {
   //如果已经登录 即直接访问页面
     next()
   }
 })

1. 当图片路径不完整时

 3-1 可以配置一个全局的过滤器拼接基础的路径
 3-2 在过滤器重判断是否完整的路径 是则不需要拼接 避免重复拼接路径的结果

//过滤器,拼接基础路径
 Vue.filter('jionPath', function (val) {
   //判断路径是否已经是完整的路径 是则不需要拼接
   if (val && val.indexOf('http') != -1) return val
   return axios.defaults.baseURL + val
 })

1. 解决跳转重复路径

 4-1 当跳转到当前路由会报错 规定不能跳转到同一路由
 4-2 解决:代码如下

在src/router/index.js中添加配置
 // 解决重复跳转同一个路由报错问题
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
 }

1. 缓存用户访问的栏目

 5-1 当跳转到某一个栏目后 点击进文章后返回 会自动回到固定的位置
 5-2 解决:添加sessionStorage的缓存数据 在点击栏目的同时将下标存储在本地存储中 再将定义栏目下标的值换为sessionStorage的缓存数据
 5-3 遇到的问题:当一开始进取没有点击栏目的时候,因为sessionStorage缓存里面没有数据 所以不会显示数据 需要在点击任意栏目后才会显示数据
 5-4 解决方法:在定义的栏目下标中判断 如果sessionStorage中没有值的话 下标就为1(代码如下)

//获取用户点击栏目的下标
 this.curIndex = name;
       sessionStorage.setItem("ye", JSON.stringify(this.curIndex));
 //重新配置到定义的栏目下标中
 curIndex: JSON.parse(sessionStorage.getItem("ye")) || 1,
 //判定没有点击时为展示下标为1的数据

1. 递归组件的应用

 6-1 递归组件:就是利用组件名称，调用自己。

1. 组件的复用

 7-1 当看到页面与页面有重复的部分 即想到可以在components中创建一个公共的组件 进行复用
 7-2 再将页面不同的地方父传子技术传进去

1. 配置响应请求的拦截器

 8-1 对数据的响应做拦截 如果没有登录要访问需要登录的页面时 会跳转到登录页 登录后才能访问
 8-2 如果已经登录了 则直接访问

// 添加响应拦截器
 axios.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     // 判断用户是否已登录，如果未登录跳转到登录页面
     if (response.data.statusCode == 401) {
         Toast.fail("请求登录！");
         let url = location.origin
         location.href = url + "/#/login";
     }
     return response;
 }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
 });

内容还未补全 第一次接触vue项目的总结 有错误的地方希望能告知修正 谢谢