创建vue3项目步骤

devtools/2024/11/18 8:32:46/

脚手架创建项目:

javascript">pnpm  create vue

  1. Cd   项目名称
  2. 安装依赖:Pnpm  i
  3. Pnpm  Lint:修复所有文件风格 ,不然eslint语法警告报错要双引号
  4. 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;
}


http://www.ppmy.cn/devtools/134911.html

相关文章

【汇编语言】数据处理的两个基本问题 —— 汇编语言中的数据奥秘:数据位置与寻址方式总结

文章目录 前言1. 引言1.1 两个基本问题1.2 两个描述性符号 2. bx、si、di和bp2.1 通过"[...]"来寻址&#xff0c;只有这四种寄存器2.2 四种寄存器寻址时的组合方式2.3 使用bp时&#xff0c;默认段地址为ss 3.机器指令处理的数据在什么地方&#xff1f;4. 汇编语言中数…

【SQL】mysql常用命令

为方便查询&#xff0c;特整理MySQL常用命令。 约定&#xff1a;$后为Shell环境命令&#xff0c;>后为MySQL命令。 1 常用命令 第一步&#xff0c;连接数据库。 $ mysql -u root -p # 进入MySQL bin目录后执行&#xff0c;回车后输入密码连接。# 常用参数&…

任意文件下载漏洞

1.漏洞简介 任意文件下载漏洞是指攻击者能够通过操控请求参数&#xff0c;下载服务器上未经授权的文件。 攻击者可以利用该漏洞访问敏感文件&#xff0c;如配置文件、日志文件等&#xff0c;甚至可以下载包含恶意代码的文件。 这里再导入一个基础&#xff1a; 你要在网站下…

#define定义宏

&#xff03;define机制包括了一个规定&#xff0c;允许把参数替换到文本中&#xff0c;这种实现通常称为宏或定义宏。 宏的申明方式&#xff1a; &#xff03;define name&#xff08;parament-list&#xff09;stuff 其中的parament-list是一个由逗号隔开的符号表&#xf…

go channel中的 close注意事项 range取数据

在使用 Go 语言中的 close 函数时&#xff0c;有一些注意事项需要牢记&#xff0c;以确保程序的健壮性和正确性&#xff1a; 1. **仅用于通道&#xff08;channel&#xff09;**&#xff1a; - close 函数只能用于关闭通道&#xff0c;不能用于关闭文件、网络连接或其他资源…

设计一个设备探测1pv

探测**1 pV&#xff08;皮伏特&#xff0c;&#xff09;的微弱电信号是一个非常具有挑战性但可行的目标。这种极低电压的探测需要超高灵敏度的电路设计和信号处理技术&#xff0c;同时要尽量抑制噪声对信号的干扰。 以下是设计此类设备的一些核心思路和技术方向&#xff1a; …

如何让手机ip变成动态

在数字化浪潮中&#xff0c;手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、使用社交媒体还是进行在线购物&#xff0c;手机都扮演着举足轻重的角色。然而&#xff0c;在享受网络带来的便利时&#xff0c;我们也需要关注网络安全和隐私保护。静态IP地址可能让手机…

Debezium系列之:Debezium3版本使用快照过程中的指标

Debezium系列之:Debezium3版本使用快照过程中的指标 一、背景二、技术原理三、增量快照四、阻塞快照指标一、背景 使用快照技术的过程中可以观察指标,从而确定快照的进度二、技术原理 Debezium系列之:Debezium 中的增量快照Debezium系列之:Incremental snapshotting设计原理…