脚手架创建项目:
javascript">pnpm create vue
- Cd 项目名称
- 安装依赖:Pnpm i
- Pnpm Lint:修复所有文件风格 ,不然eslint语法警告报错要双引号
- Pnpm dev启动项目
拦截错误代码提交到git仓库:提交前做代码检查
javascript">pnpm dlx husky-initpnpm install
目录调整:
访问权限控制router.ts:
前置守卫:
javascript">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'})
后置守卫页面标题:
javascript">router.afterEach((to)=>{document.title=`sealtool-${to.meta.title||''}`
})
type文件定义vue-router.d.ts文件类型:
javascript">import 'vue-router'declare module 'vue-router'{扩展vue-router里面得routeMeta接口里面得属性title类型interface RouteMeta{title?:string}
}
手机端安装命令:
1.引入vant组件:
javascript">Pnpm add vant
2.main.ts引入样式:
javascript">import 'vant/lib/index.css'
移动端适配:单位自动转为vw,进行等比例缩放
pnpm i postcss-px-to-viewport -D
新建一个postcss.config.js项目文件:加上一些插件的配置
Vant组件自动注册:
好处:components文件下和vant框架都可以自动注册,不用手动导入
javascript">pnpm add unplugin-vue-components -D
主题定制css:
main.scss文件:
定义全局变量::root{ 变量名字 : #069; }
局部变量: 选择器(.)类名{ 变量名字 : #069; }
使用变量的方法: color:var(变量名字)
覆盖vant主题色方法:
持久化:
javascript">pnpm i pinia-plugin-persistedstate
persidt:true 可以开启持久化存储
pinia如何统一管理:
1.stores/index.ts引入持久化存储
javascript">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
javascript">import { createApp } from 'vue'
// pinia
import pinia from '@/stores'
const app = createApp(App)
app.use(pinia)
Axios请求工具:
javascript">pnpm i axios
utils文件夹里面新建request.ts文件:设置请求拦截器和响应拦截器
javascript">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.messageif (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
)=>{// 参数:地址,请求方式,提交的数据// 返回:promisereturn api.request<any,Data<T>>({url,method,[method.toUpperCase() === 'GET' ? 'params' : 'data'] : submitData})
}
打包svg图标配置:
官网地址:https://github.com/vbenjs/vite-plugin-svg-icons
javascript">pnpm install vite-plugin-svg-icons -D
javascript">配置:vite.config.tsimport { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'createSvgIconsPlugin({iconDirs: [path.resolve(process.cwd(), 'src/icons')],
})
导入:main.ts
javascript">import 'virtual:svg-icons-register'
全局使用:se-icon.vue文件:
javascript"><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>
组件中使用
javascript"> <se-icon :name="`icon_touxiangbeijing`"></se-icon>
安装进度条:要安装两个命令
javascript">pnpm i nprogress
pnpm i @types/nprogress -D
vue-router.ts文件配置:
javascript">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;
}