},
//{
//配置404页面
//path: '/:catchAll(.\*)',
//name: '404',
//component: () => import(''),
//}
]
// 路由
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出
export default router
3. 在src的`main.ts`文件引入。
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’
//1、route
import router from ‘@/router/index’
const app = createApp(App)
//1、route
app.use(router)
app.mount(‘#app’)
4. App.vue使用路由
首页
关于
### 3.8 安装Pinia
参考1:[Vue3 Vite3 状态管理 pinia 基本使用、持久化、在路由守卫中的使用]( )
>
> 因为是vue3+ts,安装Pinia更好点,vuex拥抱ts没有Pinia好。
>
>
>
**Pinia介绍**
参考:[什么是Pinia?]( )
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。
---
#### 3.8.1 Pinia的使用
1. npm方式安装
npm install pinia
2. 在src下创建一个`store`文件夹,再创建一个`index.ts`文件
>
> 其它名也可以,因为`pinia`它有一个根文件,会把`createPinia`第一个参数当`id`值,相当于`vuex`中的`module`自动引入,也会在`Vue.js devtools`插件中以第一个参数名展示(下面展示)
> **注意**:`createPinia`第一个参数很重要,而且是唯一值。它的命名在`devtools`插件能方便找到这个文件的数据,方便调试。
>
>
>
import { createPinia } from ‘pinia’
const pinia = createPinia()
export default pinia
3. 在`src`的`main.ts`引入
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’
//1、route
import router from ‘@/router/index’
//2、pinia
import pinia from ‘@/store’
const app = createApp(App)
//1、route
app.use(router)
//2、pinia
app.use(pinia)
app.mount(‘#app’)
4. 在`store`文件夹下创建`modules`目录,存储每个模块的状态,新建`demo.ts`。这里使用最新的`Composition APIsetup`的方式来定义状态。
import { defineStore } from ‘pinia’
import { ref } from ‘vue’
const useDemoStore = defineStore(‘demo’, () => {
const counter = ref(0)
const increment = () => {
counter.value++
}
return {
counter,
increment
}
})
export default useDemoStore
5. 使用`pinia`
在路由示例的`about.vue`页面使用!
About Page
counter: {{ counter }}
#### 3.8.2 Pinia状态持久化
在`3.7.1`中,假设计数器加到`5`,如果刷新浏览器,`counter`的值又会被初始化为`0`。这是因为状态是存储在浏览器内存中的,刷新浏览器后,重新加载页面时会重新初始化`vue`、`pinia`,而`pinia`中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据没了,所以`counter`的值就被初始化为`0`。
要解决这个问题非常简单,在状态改变时将其同步到浏览器的存储中,如`cookie`、`localStorage`、`sessionStorage`。每次初始化状态时从存储中去获取初始值即可。
使用`pinia`的插件`pinia-plugin-persistedstate`来实现。
1. 安装依赖
npm install pinia-plugin-persistedstate
2. 引入该插件,在src的store文件夹下修改index.ts文件:
import { createPinia } from ‘pinia’
import piniaPluginPersistedstate from ‘pinia-plugin-persistedstate’
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
3. 设置`persist`持久化
在需要持久化状态的模块中设置`persist`。假设`demo`模块需要对状态需要持久化,`defineStore`第一个参数定义唯一的模块名,第二个参数传递`setup`,其实还有第三个参数`options`,在`options`中便可开启持久化:
修改`store/modules/demo.ts`:
import { defineStore } from ‘pinia’
import { ref } from ‘vue’
const useDemoStore = defineStore(‘demo’, () => {
const counter = ref(0)
const increment = () => {
counter.value++
}
return {
counter,
increment
}
}, {
persist: true
})
export default useDemoStore
会将状态缓存在`localStorage`中。
4. 如果需要将其存储在`sessionStorage`中,就需要设置`persist`的值为一个对象:
import { defineStore } from ‘pinia’
import { ref } from ‘vue’
const useDemoStore = defineStore(‘demo’, () => {
const counter = ref(0)
const increment = () => {
counter.value++
}
return {
counter,
increment
}
}, {
persist: {
key: ‘aaa’,
storage: sessionStorage
}
})
export default useDemoStore
### 3.9 安装配置axios
1. npm方式安装
npm install axios
2. 封装request
在`src`下创建一个`utils`文件夹,添加`request.ts`文件
import axios from ‘axios’
// 创建axios实例
const request = axios.create({
baseURL: ‘’,// 所有的请求地址前缀部分(没有后端请求不用写)
timeout: 80000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// ‘Content-Type’: ‘application/json’,
// ‘token’: x-auth-token’,//一开始就要token
// ‘X-Requested-With’: ‘XMLHttpRequest’,
// },
})
// request拦截器
request.interceptors.request.use(
config => {
// 如果你要去localStor获取token
let token = localStorage.getItem(“x-auth-token”);
if (token) {
//添加请求头
config.headers[“Authorization”] = "Bearer " + token
}
return config
},
error => {
// 对请求错误做些什么
Promise.reject(error)
}
)
// response 拦截器
request.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default request
3. 创建调用的接口
在`src`下创建一个`api`文件夹,然后再在`api`下创建`login`文件夹,添加`login.ts`文件
>
> 定义接口格式:
> export const 自定义接口名 = (形参:请求类型):返回类型 => instance.方法(路径,后端要的参数);
>
>
>
import instance from “@/utils/request”;
//一般情况下,接口类型会放到一个文件
// 下面两个TS接口,表示要传的参数
interface ReqLogin {
name: string
paw: string
}
interface ReqStatus {
id: string
navStatus: string
}
// Res是返回的参数,T是泛型,需要自己定义,返回对数统一管理***
type Res = Promise<ItypeAPI>;
// 一般情况下响应数据返回的这三个参数,
// 但不排除后端返回其它的可能性,
interface ItypeAPI {
data: T,//请求的数据,用泛型
msg: string | null // 返回状态码的信息,如请求成功等
code: number //返回后端自定义的200,404,500这种状态码
}
// post请求 ,没参数
export const LogoutAPI = (): Res => instance.post(“/admin/logout”);
// post请求,有参数,如传用户名和密码
export const loginAPI = (data: ReqLogin): Res =>
instance.post(“/admin/login”, data);
// post请求 ,没参数,但要路径传参
export const StatusAPI = (data: ReqStatus): Res =>
instance.post(/productCategory?ids=${data.id}&navStatus=${data.navStatus}
);
// get请求,没参数,
export const FlashSessionListApi = (): Res =>
instance.get(“/flashSession/list”);
// get请求,有参数,路径也要传参 (也可能直接在这写类型,不过不建议,大点的项目会维护一麻烦)
export const ProductCategoryApi = (params: { parentId: number }): Res =>
instance.get(/productCategory/list/${params.parentId}
, {params});
// get请求,有参数,(如果你不会写类型也可以使用any,不过不建议,因为用了之后 和没写TS一样)
export const AdminListAPI = (params: any): Res => instance.get(“/admin/list”, {params});
4. 在要请求的组件上使用
**方式1**:使用`.then`
**方式2**:直接使用(和`vue2`在`cretae`上用一样,`setup`自带`async`,`await`在顶层可以直接使用)
**方式3**:使用`async/await`,(`setup`虽然自带`async`,但单独用`await`只能在顶层使用,如果在函数下还是要`async/await`一起写)
5. 代理
>
> 需要代理才写
>
>
>
在`src`目录的`utils`下的`request.ts`添加文件
const request = axios.create({
//这时你要代理
//填写后端统一的前缀,
//如:123.xx.xx.xx:456/api/…
//这个/api是每一个接口都有的,就写它
//如果没有,也写,下面会讲区别
baseURL: ‘/api’,
})
完整代码:
import axios from ‘axios’
// 创建axios实例
const request = axios.create({
// baseURL: ‘’,// 所有的请求地址前缀部分(没有后端请求不用写)
//这时你要代理
//填写后端统一的前缀,
//如:123.xx.xx.xx:456/api/...
//这个/api是每一个接口都有的,就写它
//如果没有,也写,下面会讲区别
baseURL: '/api',
timeout: 80000, // 请求超时时间(毫秒)
withCredentials: true,// 异步请求携带cookie
// headers: {
// 设置后端需要的传参类型
// 'Content-Type': 'application/json',
// 'token': x-auth-token',//一开始就要token
// 'X-Requested-With': 'XMLHttpRequest',
// },
})
// request拦截器
request.interceptors.request.use(
config => {
// 如果你要去localStor获取token
let token = localStorage.getItem(“x-auth-token”);
if (token) {
//添加请求头
config.headers[“Authorization”] = "Bearer " + token
}
return config
},
error => {
// 对请求错误做些什么
Promise.reject(error)
}
)
// response 拦截器
request.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)
export default request
`vite.config.ts` 文件:只需添加server部分即可。
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
//1、 导入 path 模块,帮助我们解析路径
import { resolve } from ‘path’
//2-1 自动导入vue中hook reactive ref等
import AutoImport from ‘unplugin-auto-import/vite’
//2-2 自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from ‘unplugin-vue-components/vite’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
//安装两行后你会发现在组件中不用再导入ref,reactive等
imports: [‘vue’, ‘vue-router’],
//存放的位置
dts: “src/auto-import.d.ts”,
}),
Components({
// 引入组件的,包括自定义组件,存放的位置
dts: “src/components.d.ts”,
}),
],
//1、 ↓解析配置
resolve: {
// ↓路径别名
alias: {
"@": resolve(__dirname, "./src"),
"\_c": resolve(__dirname, "./src/components")
}
},
//代理
server: {
proxy: {
'/api': { // 匹配请求路径,
target: '你要代理的地址', // 代理的目标地址
// 开发模式,默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
changeOrigin: true,
// secure: true, // 是否https接口
// ws: true, // 是否代理websockets
// 路径重写,\*\*\*\* 如果你的后端有统一前缀(如:/api),就不开启;没有就开启
//简单来说,就是是否改路径 加某些东西
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
### 3.10 自定义组件名setup语法糖
>
> 在 vue 3.2.34 或以上的版本中,使用 `<script setup>` 的单文件组件会自动根据文件名生成对应的 name 选项,无需再手动声明。也就是说,除非你想换名,并且又不想写两个 script 标签,就可以通过下面的链接去做。
>
>
>
1. 安装`vite-plugin-vue-setup-extend`
npm install -D vite-plugin-vue-setup-extend
2. 配置`vite.config.ts`
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
//1、 导入 path 模块,帮助我们解析路径
import { resolve } from ‘path’
//2-1 自动导入vue中hook reactive ref等
import AutoImport from ‘unplugin-auto-import/vite’
//2-2 自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from ‘unplugin-vue-components/vite’
//3、vue3语法糖
import VueSetupExtend from ‘vite-plugin-vue-setup-extend’
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
//安装两行后你会发现在组件中不用再导入ref,reactive等
imports: [‘vue’, ‘vue-router’],
//存放的位置
dts: “src/auto-import.d.ts”,
}),
Components({
// 引入组件的,包括自定义组件,存放的位置
dts: “src/components.d.ts”,
}),
VueSetupExtend(),
],
//1、 ↓解析配置
resolve: {
// ↓路径别名
alias: {
"@": resolve(__dirname, "./src"),
"\_c": resolve(__dirname, "./src/components")
}
},
//代理
server: {
proxy: {
'/api': { // 匹配请求路径,
target: '你要代理的地址', // 代理的目标地址
// 开发模式,默认的127.0.0.1,开启后代理服务会把origin修改为目标地址
changeOrigin: true,
// secure: true, // 是否https接口
// ws: true, // 是否代理websockets
// 路径重写,\*\*\*\* 如果你的后端有统一前缀(如:/api),就不开启;没有就开启
//简单来说,就是是否改路径 加某些东西
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})
3. 使用
### 3.11 安装element-plus组件库
>
> `element-plus`和`Ant Design Vue`都是组件库,可以只安装其中一个,也可以两个都装,相辅相成。
>
>
>
1. 安装`element-plus`组件库
NPM方式
npm install element-plus --save
2. 安装`element-icon`图标
npm install @element-plus/icons-vue
3. `main.ts`引入
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’
//1、route
import router from ‘@/router/index’
//2、pinia
import pinia from ‘@/store’
//3、element-plus
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
const app = createApp(App)
//1、route
app.use(router)
//2、pinia
app.use(pinia)
//3、element-plus
app.use(ElementPlus)
app.mount(‘#app’)
4. 使用
在`.vue`页面引入所需组件即可。
5. `ElMessage`与`ElLoading` 找不到的问题【没有报错时可不配置】
>
> 如果项目使用时出现问题找不到模块`element-plus`或其相应的类型声明的问题需要。
>
>
>
* 在`src`根目录创建`Element-plus.d.ts`文件
//文件内容
export {}
declare global {
const ElMessage: typeof import(‘element-plus’)[‘ElMessage’]
const ElLoading: typeof import(‘element-plus’)[‘ElLoading’]
}
* 然后在`tsconfig.json`文件添加一行代码
“include”: [
“src/**/*.ts”,
“src/**/*.d.ts”,
“src/**/*.tsx”,
“src/**/*.vue”,
//添加这行
“Element-plus.d.ts”
],
完整代码:
{
“compilerOptions”: {
“target”: “ES2020”,
“useDefineForClassFields”: true,
“module”: “ESNext”,
“lib”: [
“ES2020”,
“DOM”,
“DOM.Iterable”
],
“skipLibCheck”: true,
/* Bundler mode */
“moduleResolution”: “bundler”,
“allowImportingTsExtensions”: true,
“resolveJsonModule”: true,
“isolatedModules”: true,
“noEmit”: true,
“jsx”: “preserve”,
/* Linting */
“strict”: true,
“noUnusedLocals”: true,
“noUnusedParameters”: true,
“noFallthroughCasesInSwitch”: true,
// 配置@别名 start
“baseUrl”: “.”,
“paths”: {
“@/*”: [
“src/*”
],
“_c/*”: [
“src/components/*”
]
}
// 配置@别名 end
},
“include”: [
“src/**/*.ts”,
“src/**/*.d.ts”,
“src/**/*.tsx”,
“src/**/*.vue”,
//添加这行
“Element-plus.d.ts”
],
“references”: [
{
“path”: “./tsconfig.node.json”
}
]
}
### 3.12 安装与使用Echarts
参考:[vue3 + ts 在 setup 下使用Echarts]( )
1. 安装Echarts
npm install echarts --save
2. `main.ts`引入
import { createApp } from ‘vue’
import ‘./style.css’
import App from ‘./App.vue’
//1、route
import router from ‘@/router/index’
//2、pinia
import pinia from ‘@/store’
//3、element-plus
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
//4、引入echarts
import * as echarts from ‘echarts’
const app = createApp(App)
//1、route
app.use(router)
//2、pinia
app.use(pinia)
//3、element-plus
app.use(ElementPlus)
//4、放入全局
app.config.globalProperties.$echarts = echarts
app.mount(‘#app’)
3. 在`.vue`使用
* html部分
* `js`代码部分
完整代码:
### 3.13 安装Ant Design Vue组件库【可选】
1. 安装`ant-design-vue`
npm install ant-design-vue --save
2. 安装`ant-design`图标
npm install --save @ant-design/icons-vue
3. `main.ts`引入
import {createApp} from ‘vue’
import ‘@/style.css’
import App from ‘@/App.vue’
//1、routes
import router from “@/router/index”
//2、pinia
import {createPinia} from ‘pinia’
//3、element-plus
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
//4、ant-design-vue
import Antd from ‘ant-design-vue’
import ‘ant-design-vue/dist/antd.css’
const app = createApp(App)
const pinia = createPinia()
//1、routes
app.use(router)
//2、pinia
app.use(pinia)
//3、element-plus
app.use(ElementPlus)
//4、ant-design-vue
app.use(Antd)
app.mount(‘#app’)
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗?
-
React的jsx,函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西,接受几个参数
-
redux请求中间件如何处理并发
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0