如何安装卸载node，vue，Vue封装路由，vuex，及路由传参，路由拦截，axios普通封装

安装

安装node:
打开node官网，目前最高版本18由于版本太高 node会影响我 们使
用-找到16版本-下一步下一步......
当我们在安装node的同时会自动帮我们安装npm
检测是否安装成功:
npm -v
node -v

安装Vue:
npm i @vue/cli -g
检测是否安装成功:
vue -V

安装yarn:
npm i yarn -g
检测:
yarn -v

卸载

卸载node:
打开控制面板，找到Node.js程序卸载即可。

卸载Vue:
vue是工具要加-g 
首先以管理员身份卸载才可以卸载运行以下指令：
npm uninstall @vue/cli -g 

卸载yarn:
npm uninstall yarn -g

yarn的使用和指令

yarn 下载所有的依赖包
yarn add xxx@2.0.0   下载执行依赖
yarn remove xxx        删除指定依赖包

Vue路由和vuex插件版本

如果我们使用的是vue2的项目，下载路由和vuex时我们必须下载3x的版
本，因为vue2项目对应的是3x的版本 在下载时我们可以这样 ↓↓↓
yarn add vue-router@3.6.5
yarn add vuex@3.6.5
或者版本号直接写3也可以

Vue

如何设置匹配404页面？

在router路由的规则中使用*来作为path路径，所有匹配不到的路由路径都
将会显示这个*匹配的组件
{
        path:'*',
        component:()=>import('@/view/404.vue')
}


为什么要匹配404？
为了提高用户使用体验，我们在开发项目中必须定义404页面，防止用户误
输入http地址导致没有页面，这时我们可以使用404将用户页面导航到我们
的项目首页。

路由传参有哪些？

路由传参目前我们接触的有三种，分别是↓↓↓ query+params+params的行内式

query传参

传递时:
this.$router.push('/home?id='+id)
home是路由页面，?id是传递的参数属性名+后面是变量实际传递的属性值
接收时:
let i = this.$router.query.id
获取时我们通过传递的参数属性名就可以，这种必须用query来接收
无需配置路由

params传参

params需要配置路由，首先进入路由中进行操作。
路由中：
{
        path:'/datail/:id',
        component:()=>import('@/view/datail.vue')
},

传递时：
this.$router.push('/datail/'+'123')

接收时：
let i = this.$route.params.id

params的行内式

params都要设置路由，必须在路由定义属性名才可以。
这种方式的传参，参数只能传递一次刷新页面就消失，
并且http地址中不会显示我们传递的数据， 需要配合
本地储存使用。

路由中:
{
        path:'/datail/:id',
        component:()=>import('@/view/datail.vue')
},
传递时:
    <router-link :to="{name:'datail',params:{id:'123123123'}}">行内</router-link>
必须通过router-link跳转，通过to传参↓
{name:'路由name名',params:{属性名:'属性值'}}

接收时:
let i = this.$route.params.属性名

手写路由（基础）

main.js中

首选安装路由插件 语法在上面 这是组件名和版本号↓

"vue-router": "3.6.5"

导入路由
import router from './router'
new Vue({
  // 注入路由器，我们可以在任何组件内通过
  // this.$router访问路由，同时可以访问当前路由
  router,
  render: h => h(App),
}).$mount('#app')

index.js中

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 注意：变量名必须一致才可以不然无法使用，必须routes
const routes = [
    {
        path:'/',
        component:()=>import('@/view/home.vue')
    },
]

// 上面是route s 这是r
const router = new VueRouter({
    routes
})
// 默认抛出
export default router

vuex

请根据这篇文章封装vuex ↓ juejin.cn/post/717103…

axios封装

在utils文件index.js中

// 导入axios
import axios from 'axios'
// 创建实例
let instance = axios.create({
    baseURL:'',
    timeout:3000
})

// 请求拦截
instance.interceptors.request.use()
// 响应拦截
instance.interceptors.response.use()

export default instance
//以上方式只是普通封装

在main.js中

// 导入axios文件路径
import axios from '@/utils/index'
// 将axios挂载到Vue的原型上，使用$http即可
Vue.prototype.$http = axios

最后总结一点概念

1.为什么要使用模块化？
因为数据太臃肿了，用模块化比较方便。

2.vue提供的组件有哪些？

3.什么是声明式导航及编程式导航？
声明式导航通过 router-link 跳转的，
编程式导航通过 this.$router.push跳转

4.为什么vue模块化中state数据写成函数？
vuex模块化封装，state数据写成函数是为了防止冲突。

5.项目上线后还需要axios吗 ?
项目上线后依然需要保留axios，打包时必须要打包它，
上线后如果没有axios是请求不了数据的。

6.axios是什么及它的特性？
axios是一个基于promise的网络请求库，用来请求服务端的数据。
特性是，从浏览器创建XMLHttpRequests,从node.js创建http的
请求，支持Promise Api 拦截请求和响应数据，自动转换JSON数
据客户端支持防御XSRF