一、初始化项目
使用命令npm init vite创建项目,输入项目名称后语言选择Vue,然后选择TypeScript。然后进入项目使用命令npm install安装依赖,然后使用npm run dev启动。
二、安装状态管理工具pinia
使用命令npm i pinia -S安装状态管理工具pinia。
创建src/store/index.ts文件
import { createPinia } from "pinia"
const store = createPinia()
export default store
封装一个用户store,创建src/store/user.ts
// pinia 用户使用方法
import { defineStore } from "pinia"
export const userStore = defineStore({
id: 'user',
// 数据
state: () => {
return {
token: localStorage.getItem('token') || '',
userInfo: localStorage.getItem('userInfo') || {}
}
},
// 方法
actions: {
setUserInfo(data: any) {
this.token = data.token
this.userInfo = data.user_info
localStorage.setItem('token', this.token)
localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
}
}
})
main.ts中导入store
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
三、安装路由vue-router
使用命令npm i vue-router -S安装路由。
创建src/router/index.ts文件
// createRouter用于创建vue-router实例对象
// RouteRecordRaw用于规范路由规则,增加路由对象类型限制
// createWebHashHistory用于指定路由的工作模式(Hash)
import { createRouter, RouteRecordRaw, createWebHashHistory } from "vue-router"
// 引入store的userStore
import { userStore } from "../store/user"
// 创建路由规则
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('../components/HelloWorld.vue')
}
]
// 创建路由实例对象
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 路由导航守卫
router.beforeEach((to, from, next) => {
const store = userStore();
if (store.token) {
next()
} else {
// ...
}
})
export default router
main.ts中导入router
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'
import router from './router'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')
四、封装请求、响应拦截器、api
使用命令npm i @vueuse/core -S安装api插件。使用命令npm i axios -S安装网络请求库。
创建src/utils/require.ts文件,封装请求接口文件。
import axios from "axios"
let baseURL = '/api'
const service = axios.create({
baseURL,
timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['x-acess-token'] = token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data;
if (response.status !== 200) {
return Promise.reject(new Error(res.success || 'error'))
} else {
if (res.code === 200) {
return res.result
} else {
alert(res.success)
}
}
},
error => {
return Promise.reject(error)
}
)
export default service
创建api/user.ts用户api接口文件
import require from '../utils/require'
// get
export const getUser = (data: any) => {
return require({
url: 'user/list',
method: 'get',
params: data
})
}
// post
export const editUser = (data: any) => {
return require({
url: 'user/edit',
method: 'post',
data
})
}
五、跨域代理
本地请求服务器接口是存在跨域的,需要做跨域代理进行接口访问。在vite.config.ts文件中修改配置
export default defineConfig({
plugins: [vue()],
// 跨域代理
// 线上接口
server: {
// 端口号
port: 8002,
// 允许自动打开浏览器
open: true,
// 跨域代理
proxy: {
'/api': 'http://abc.com'
},
// 允许跨域
cors: true
}
// 本地接口
// server: {
// // 跨域代理
// proxy: {
// '/api': 'http://localhost:5080'
// },
// }
})
六、rem移动端适配
创建src/utils/rem.ts文件
// 移动端rem适配
// 基准大小
const baseSize = 37.5
// 适配方案
const setRem = () => {
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = baseSize * Math.min(scale, 1) + 'px'
}
// 初始化
setRem()
// 改变窗口大小的时候重新设置一下rem
window.onresize = () => {
setRem()
}
export default baseSize
在main.ts中导入
import './utils/rem'
七、配置vant库
使用命令npm i vant -S安装vant库。
在main.ts中引入,以Button按钮为例按需引入
// 导入vant样式
import './assets/css/style.css'
// 导入vant的Button按钮
import { Button } from 'vant'
const app = createApp(App)
app.use(Button)