5 第三方工具

约 866 字大约 3 分钟

2025-05-05

vant是一个组件库,推荐局部导入

建议在utils文件夹下创建一个vant的.js文件专门用于导入库组件再在main.js中导入这个工具类,这样方便管理

Toast

toast默认是单例的,一旦创建新的toast旧的toast自动销毁, 当使用toast显示加载窗口时指定显示时间为0表示不自动关闭,只能手动关闭一般在请求拦截器中创建一个toast,在响应拦截器中调用toast.clear()清除加载显示窗口

postcss

postcss是一个插件在vue中默认是px为单位,使用postcss后会在编译时将数值转换为vw的 vw常用于移动端,100vw是一个屏幕的宽度

打包和发布

目前所做的项目都是基于vue脚手架做的,在真正的网页中识别不了vue,ts,less,sass等高级语法,需要将项目打包编译成网页可识别的htm,css,js的文件 vue脚手架工具已经提供了打包命令,直接使用即可

npm run build

会在项目的根目录会自动创建一个文件夹dist，dist中的文件就是打包后的文件，只需要放到服务器中即可。默认情况下，需要放到服务器根目录打开，如果希望双击运行，需要配置publicPath配成相对路径

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
})

路由懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

import Layout from '@/views/layout'
import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'

const Login = () => import('@/views/login')
const MyOrder = () => import('@/views/myorder')
const Pay = () => import('@/views/pay')
const ProDetail = () => import('@/views/prodetail')
const Search = () => import('@/views/search')
const store = () => import('@/store')
const SearchList = () => import('@/views/search/list')

将经常用到的视图打包在一起,不经常用到的视图使用路由懒加载的方式打包

husky

是在git提交前做代码格式的检查

安装并初始化

pnpm dlx husky-init && pnpm install

初始化时会在当前目录下新建一个.husky文件夹,其中有一个pre-commit文件,这个文件就是提交前要执行的命令

pnpm lint

lint命令是eslint的命令,它的作用是检查项目所有文件并进行格式化

使用lint命令当项目体积大时就非常耗时,且有些没有修改的代码也会被无意义地检查,或者拉取的别人的代码和本地格式不一样或并没有husky规范也会出现问题

暂存区eslint校验

在暂存区检查代码

lint会检查提交的代码和仓库中的代码 lint-staged只会检查暂存区的代码

安装lint-staged

pnpm i lint-staged -D

在package.json中配置lint-staged

"scripts": {
    "lint-staged": "lint-staged"
  },
"lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
}

.husky/pre-commit文件修改

pnpm lint-staged

element-plus

element-plus是一个用于pc端网页开发的组件库其中AutoImport和Componets插件导入后可以不导入直接使用组件,同时在componets文件夹下的组件也会被自动注册,无需导入即可使用

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)

5 第三方工具

公告