当前位置：首页 > news >正文

创建vue3项目步骤

news 2025/7/4 7:13:05

脚手架创建项目：

pnpm  create vue

Cd 项目名称
安装依赖：Pnpm i
Pnpm Lint：修复所有文件风格，不然eslint语法警告报错要双引号
Pnpm dev启动项目

拦截错误代码提交到git仓库：提交前做代码检查

pnpm dlx husky-initpnpm 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  vant

2.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-persistedstate

persidt: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  axios

utils文件夹里面新建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.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

pnpm install  vite-plugin-svg-icons -D

配置：vite.config.tsimport { 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 -D

vue-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;
}

查看全文

http://www.lryc.cn/news/486788.html