创建vue3项目步骤
脚手架创建项目：
pnpm create vue
- Cd 项目名称
- 安装依赖：Pnpm i
- Pnpm Lint：修复所有文件风格 ，不然eslint语法警告报错要双引号
- Pnpm dev启动项目
拦截错误代码提交到git仓库：提交前做代码检查
pnpm dlx husky-init
pnpm install目录调整：
访问权限控制router.ts：
前置守卫：
import { userStore } from '@/stores';
// vue3的前置导航
router.beforeEach((to,from)=>{
// next现在可选，next()放行 next（‘/login’）跳转指定路由路径
// 返回false取消
// 返回true|undefined放行
// 返回路由地址（对象格式）重定向
//获取token的
const store=userStore()
// 白名单：不需要登陆的页面可以直接访问
const wihteList=['/login','register']
// 如果没有token并且没有白名单，就重定向到登陆页面
if(!store.token&&!wihteList.includes(to.path)) return '/login'
})后置守卫页面标题：
router.afterEach((to)=>{
document.title=`sealtool-${to.meta.title||''}`
})type文件定义vue-router.d.ts文件类型：
import 'vue-router'
declare module 'vue-router'{扩展vue-router里面得routeMeta接口里面得属性title类型
interface RouteMeta{
title?:string
}
}
手机端安装命令：
1.引入vant组件：
Pnpm add vant2.main.ts引入样式：
import 'vant/lib/index.css'移动端适配：单位自动转为vw,进行等比例缩放
pnpm i postcss-px-to-viewport -D
新建一个postcss.config.js项目文件：加上一些插件的配置
Vant组件自动注册：
好处：components文件下和vant框架都可以自动注册，不用手动导入
pnpm add unplugin-vue-components -D
主题定制css:
main.scss文件：
定义全局变量：：root{ 变量名字 : #069; }
局部变量: 选择器（.）类名{ 变量名字 : #069; }
使用变量的方法: color：var(变量名字)
覆盖vant主题色方法：
持久化：
pnpm i pinia-plugin-persistedstatepersidt:true 可以开启持久化存储
pinia如何统一管理：
1.stores/index.ts引入持久化存储
import {createPinia} from 'pinia'
import presist from 'pinia-plugin-persistedstate'
const pinia =createPinia()
pinia.use(presist)
export default pinia
// 将user模块里面所有的按需导出
// export * from './modules/user'2.main.ts导出pinia
import { createApp } from 'vue'
// pinia
import pinia from '@/stores'
const app = createApp(App)
app.use(pinia)Axios请求工具：
pnpm i axiosutils文件夹里面新建request.ts文件：设置请求拦截器和响应拦截器
import axios from 'axios'
import type { AxiosError } from 'axios'
import {showFailToast} from 'vant'
import { userStore } from '@/stores';
//1.创建根地址和时间
const api = axios.create({
baseURL: '',
timeout: 10000
})
api.interceptors.request.use(
(request) => {
// 2.全局拦截请求发送前提交的参数
const userStores = userStore()
// 设置请求头
if (request.headers) {
if (userStores.isLogin) {
request.headers.Authorization = `Bearer ${userStores.token}`
}
}
return request
},
)
api.interceptors.response.use(
(response) => {
//3.处理业务失败
if (response.data.code === 后端规定的失败数字是多少) {
// 这里做错误提示
showFailToast(response.data.msg||'业务失败')
return Promise.reject(response.data.msg)
}
// 4.摘取核心响应数据
return Promise.resolve(response.data)
},
(error:AxiosError) => {
// 5.处理401错误
if (error.response?.status === 401) {
// 清除本地信息
// 跳转到登录页面 ,携带当前访问页面地址
router.push({path:'/login',query:{returnUrl:router.currentRoute.value})
}
else {
let message = error.message
if (message === 'Network Error') {
message = '后端网络故障'
}
else if (message.includes('timeout')) {
message = '接口请求超时'
}
else if (message.includes('Request failed with status code')) {
message = `接口${message.substr(message.length - 3)}异常`
}
}
return Promise.reject(error)
},
)
export default api
//设置类型
type Data<T> = {
code:number,
msg:string,
total?: number,
data:T,
}
type Method = 'get' | 'post' | 'put' | 'delete' | 'patch'
export const request=<T>(
url: string,
method: Method='get',
submitData?: object
)=>{
// 参数：地址，请求方式，提交的数据
// 返回：promise
return api.request<any,Data<T>>({
url,
method,
[method.toUpperCase() === 'GET' ? 'params' : 'data'] : submitData
})
}
打包svg图标配置：
官网地址：https://github.com/vbenjs/vite-plugin-svg-icons
pnpm install vite-plugin-svg-icons -D配置：vite.config.ts
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
})
导入：main.ts
import 'virtual:svg-icons-register'全局使用：se-icon.vue文件：
<template>
<div>
<svg aria-hidden="true" class="seal-icon">
<use :href="`#icon-${name}`" />
</svg>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
defineProps<{
name: string
}>()
</script>
<style scoped lang="less">
.seal-icon {
width: 24px;
height: 24px;
}
//和字体大小一样</style>组件中使用
<se-icon :name="`icon_touxiangbeijing`"></se-icon>安装进度条：要安装两个命令
pnpm i nprogress
pnpm i @types/nprogress -Dvue-router.ts文件配置：
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
//去掉转圈的那个环形圈
NProgress.configure({
showSpinner:false
})
// vue3的前置导航
router.beforeEach((to)=>{
//开启进度条
NProgress.start()
})
router.afterEach((to)=>{
document.title=`sealtool-${to.meta.title||''}`
//关闭进度条
NProgress.done()
})
//全局css，改变进度条颜色
#nprogress .bar {
background-color: #f8e1f1 !important;
}原文地址：https://blog.csdn.net/weixin_44600235/article/details/143792055
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！