1.创建vue3项目
pnpm create vue
1-1.安装依赖并启动项目
cd qing-vue3
pnpm install
pnpm dev
1-2.安装sass
pnpm add sass -D
2.安装 element-plus
2-1. 安装
pnpm install element-plus
2-2. 自动导入
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
2-3. 自动导入配置
/**
* 因为设置了Element plus的自动导入,从而scr/components目录中的组件都会自动导入
* 具体设置参考Element plus官网
* 本项目中使用到 scr/components 中的组件就没有手动导入咯
*/
// 在 vite.config.js 文件中进行设置
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
2-4.安装element-plus图标
pnpm install @element-plus/icons-vue
3.整理pinia
3-1.在src/stores目录下新建文件夹modules和新建文件index.js
3-2 安装pinia持久化插件
pinia-plugin-persistedstate官方教程直达
pnpm i pinia-plugin-persistedstate
3-3. 修改 src/stores/index.js 内容,顺便配置了pinia持久化插件
/**
* pinia分离模块,这里将统一导出stores中所有模块
*/
import { createPinia } from 'pinia'
// pinia 持久化方案
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia
// import { useUserStore } from './user'
// export { useUserStore }
// ↓↓ 等价下面的写法
export * from './modules/counter'
3-4.以后模块文件都放到 src/stores/modules/ 里,在index.js最后一行导入即可
3-5. 修改main.js内容
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores/index' // 新增:统一将stores内容从index导出
import 'element-plus/dist/index.css' // 新增:引入element-plus css
/**
* 因为设置了Element plus的自动导入,从而scr/components目录中的组件都会自动导入
* 具体设置参考Element plus官网
* 本项目中使用到 scr/components 中的组件就没有手动导入咯
*/
const app = createApp(App)
app.use(pinia) // 新增
app.use(router)
app.mount('#app')
数据交互 - 请求工具设计
1. 创建 axios 实例
们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
- 安装 axios
pnpm add axios
- 新建
utils/request.js
封装 axios 模块
利用 axios.create 创建一个自定义的 axios 来使用
axios官网直达
import axios from 'axios'
const baseURL = 'http://big-event-vue-api-t.itheima.net'
const instance = axios.create({
// TODO 1. 基础地址,超时时间
})
instance.interceptors.request.use(
(config) => {
// TODO 2. 携带token
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
// TODO 3. 处理业务失败
// TODO 4. 摘取核心响应数据
return res
},
(err) => {
// TODO 5. 处理401错误
return Promise.reject(err)
}
)
export default instance
2. 完成 axios 基本配置
import { useUserStore } from '@/stores'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'
const baseURL = 'http://localhost:8080'
const instance = axios.create({
baseURL,
timeout: 100000
})
instance.interceptors.request.use(
(config) => {
const userStore = useUserStore()
if (userStore.token) {
config.headers.Authorization = userStore.token
}
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
if (res.data.code === 0) {
return res
}
ElMessage({ message: res.data.message || '服务异常', type: 'error' })
return Promise.reject(res.data)
},
(err) => {
ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
console.log(err)
if (err.response?.status === 401) {
router.push('/login')
}
return Promise.reject(err)
}
)
export default instance
export { baseURL }