vite新建vue3-ts
目录
初始化/创建一个vite项目
配置检查工具
ESlint
stylelint
prettier
使用git提交代码
Husky
commitlint
lintstaged
配置路径别名
配置环境变量
配置路由
配置状态管理
Vue-request
配置模拟数据mocks
配置自动导入
自动引入API
自动引入组件
自动引入图标
引入本地资源
引入SVG
引入位图
添加顶部进度条
vite-plugin-md2vue
vite-plugin-restart
生产时移除console
组件库
naive ui
图标库
xicons
iconify
样式库
工具库
lodash
Vueuse
测试框架
vitest
vite和vue-cli一样，是前端构建工具。区别在于vue-cli使用webpack，webpack需要先全部打包再返回浏览器画面，vite在开发时基于浏览器原生esmodule，是按需打包，在生产时使用rollup。本文全文参考使用 vite2 从头开始搭建 vue3 开发环境 (barwe.cc)
vite相对于vue-cli更加快速。
初始化/创建一个vite项目
npm create vite PROJECT_NAME//有可能会提示需要安装一些包，同意YES就行会提示select a framework,选择vue。提示select a variant,选择typescript。
根据命令行返回的提示操作以下
cd PROJECT_NAME
npm install
npm run dev创建项目完成
配置检查工具
ESlint
Lint（Linter） 是一种静态代码分析工具，用于标记代码中某些编码错误、风格问题和不具结构性（易导致 bug）的代码。简单理解就是一个代码检查器，检查目标代码是否符合语法和规定的风格习惯。 ESLint 是基于 ECMAScript/JavaScript 语法的 Lint(作者：非羽 链接：https://juejin.cn/post/7012798266089668645 来源：稀土掘金)
vite创建的项目默认是没有eslint代码检查功能的，所以当需要使用代码检查时需要手动加入。
安装
npm i eslint -Dnpm命令 --save(-S)生产环境,--save-dev(-D)开发环境
配置-初始化eslint
npx eslint --init
命令行会让我们选择一些选项，按以上所示选择即可，esm是JavaScript。下载完成后我们会发现项目新增了.eslintrc.cjs配置文件。
打开文件发现.eslintrc.cjs的内容如下，有可能和你建的不一样，这没关系。在rules里面可以添加规则。
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential"
],
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"vue"
],
"rules": {
}
}
使用-eslint检查代码
使用eslint检查代码，有两种方式 ，一种是命令行启动，一种是vscode的eslint扩展。
1.命令行使用。在package.json文件中添加以下代码段告诉eslint需要检查哪些文件。
"scripts": {
// 执行该命令eslint会检测当前项目下所有的.vue,.js,.ts,.jsx,.tsx文件是否符合eslint的代码规范，并尝试自动修复
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
},使用eslint，有可能有报错，请根据报错自行搜索方法并处理掉报错再继续。
npm run lint题外话：.eslintrc.js和eslintrc.cjs的区别去这里typescript - eslint 和 prettier 配置文件不能是 .js 文件，必须是.cjs 文件怎么回事 ？ - SegmentFault 思否
忽略-一些eslint规则
1.使用注释
** // eslint-disable-line **
注释仅对该行禁用 **规则。
/* eslint-disable ** */，禁用整个功能块的 ** 规则。
/* eslint-disable */，禁用整个文件的 eslint 规则。2.使用 .eslintignore
a.js //不检查该文件
*.js //不检查.js文件
a/* //不检查a目录下所有文件
也可以在package.json文件中增加如下代码（在根目录找不到.eslintignore，才会查早package.json）
{
"eslintIgnore": ["hello.js", "world.js"]
}stylelint
Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。
安装
下载styelint,standard包
npm install --save-dev stylelint stylelint-config-standard 配置
手动新建.stylelintrc.js文件，添加配置文件如下
module.exports = {
root: true,
plugins: ['stylelint-order', 'stylelint-scss'],
extends: [
'stylelint-config-standard',
'stylelint-config-prettier',
'stylelint-config-recess-order',
],
rules: {
// 不要使用已被 autoprefixer 支持的浏览器前缀
'media-feature-name-no-vendor-prefix': true,
'at-rule-no-vendor-prefix': true,
'selector-no-vendor-prefix': true,
'property-no-vendor-prefix': true,
'value-no-vendor-prefix': true,
},
}
忽略
1.注释忽略
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable-next-line */2.在.stylelintrc.js添加如下代码
{
ignoreFiles: ["dist/**/*", "src/assets/scss/abc.scss"]
}3.添加.stylelintignore文件
文件规则如上eslint文件
prettier
由于团队开发人员的编码习惯较难统一，要做到代码风格的一致性相对困难，尽管可以讨论制定代码规约，但可能会给开发带来额外的烦恼。Prettier的出现，很好地解决了这个问题，还可以搭配Git的hooks规避不合规范的提交(来源：代码美化神器——Prettier使用详解 - 掘金 (juejin.cn))
安装
npm install prettier -D配置
新建.prettierrc.js
module.exports = {
printWidth: 80, //单行长度
tabWidth: 4, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: false, //句末使用分号
singleQuote: true, //使用单引号
trailingComma: 'es5', // 多行时尽可能打印尾随逗号
bracketSpacing: true, // 在对象前后添加空格-eg: { foo: bar }
arrowParens: 'avoid', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
endOfLine: 'lf', //结束行形式
// 包裹文字时候结束标签的结尾尖括号掉到了下一行
htmlWhitespaceSensitivity: 'ignore',
}
使用
npx prettier --write .\test.js //格式化一个文件
npx prettier --write . //格式化所有文件忽略
新建.prettierignore
eslint注重代码质量，prettier注重格式
使用git提交代码
需要提前在git官网下载工具。
注册一个gitee账号，新建一个仓库。
创建一个目录。
git init //初始化
git remote add origin **** //链接远程仓库
git add // 添加文件到暂存区
git commit -m [message] // 提交暂存区到本地仓库,message为备注
git push -u origin master //提交到服务器，用户名为手机号，密码为gitee登录密码Husky
husky，Git hooks 工具。对git执行的一些命令，通过对应的hooks钩子触发，执行自定义的脚本程序。
安装
npm install husky --save-dev配置
npx husky-init // 初始化husky配置，会出现一个.husky目录，和pre-commit文件等
npx husky add .husky/commit-msg // 在husky配置中，添加commit-msg钩子在npm install时自动增加husky配置，只需在package.json文件中增加如下代码
{
"scripts": {
"prepare": "husky install" //找到scirpts，增加这一条代码即可
}
}commitlint
commitlint 是一个 git commit 校验约束工具。就是当我们运行git commmit -m 'xxx'时，来检查'xxx'是不是满足团队约定好的提交规范的工具。（来源：git提交规范工具commitlint - 掘金 (juejin.cn)）
安装
npm install --save-dev @commitlint/config-conventional @commitlint/clicommit提交规范
git commit -m
//注意冒号后面有空格 - type：提交的改动类型（如新增、修改、更新等） - optional scope：标识此次提交主要涉及到代码中哪个模块 - description：一句话描述此次提交的主要内容
(图源 作者：Axjy 链接:https://juejin.cn/post/7068988460899500040 来源：稀土掘金)
配置
手动新建 commitlint.config.js。输入以下代码
module.exports = {
extends: ['@commitlint/config-conventional']
}使用
npx husky add .husky/commit-msg 'npx commitlint --edit $1规则
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
// 必须加上指定的消息类型，例如 "fix: xxx"
'type-enum': [2, 'always', ['feat','fix','docs','style','refactor','test','chore']],
},
}rules规则，数组第一位，参数设置错误级别
- 0：
disable - 1：
warning - 2：
error
数组第二位，是否应用
- always
- never
数组第三位，rule的值
lintstaged
lint-staged，一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具
安装
npm i lint-staged -D配置
命令行输入以下代码
npx mrm lint-stagedmrm会自动安装依赖和配置，以下代码会自动增加在package.json中
"lint-staged": {
"*.{vue,js,ts,jsx,tsx}": "eslint --cache --fix",
"*.css": "stylelint --fix",
"*.{js,css,md}": "prettier --write"
}使用
在git commit时自动执行
配置路径别名
配置方法和vue/cli不一样。在vite.config.js中增加代码如下。resolve.alias有两种类型。一个是对象的类型，另一种是数组的类型。
import path from 'path'
export default defineConfig({
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname,'./src')
}
]
}
})如果有报错请自行解决报错
vite.config.ts报错找不到vite等。解决--安装依赖 npm add --dev @types/node。在tsconfig.json增加代码
"compilerOptions": {
...
"types": [
"node"
],
},可参考- (75条消息) 【vue3 + ts + vite】找不到模块“vue”或其相应的类型声明_陈哲星的博客-CSDN博客
配置环境变量
暂无
配置路由
安装 vue-router
npm add -D vue-router@next安装 vite-plugin-pages
npm add -D vite-plugin-pages注册 vite-plugin-pages
添加如下代码到vie.config.ts
import Pages from 'vite-plugin-pages'
//在export里面添加，不要直接复制过去
plugins: [
Pages({
dirs: 'src/pages', // 需要生成路由的文件目录
exclude: ['**/components/*.vue'] //可以不加，这个是排除文件，不生产路由
})
],
挂载router
在main.ts中添加
import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:generated-pages' // or ~generated-pages
const router = createRouter({
history: createWebHistory(),
routes,
})
app.use(router)vitual:generated-pages可能的报错：找不到模块
在eslinctrc.cjs关闭规则
{
rules: {
// 部分 from 子句不是标准的 ES6 语法，例如路径别名、虚拟模块等
// ts 编译器本身就会检查这些 from 子句并给出提示，这里关闭 eslint 检查
'import/no-unresolved': 'off',
}
}在tsconfig.json中增加以下代码
{
"compilerOptions": {
"types": ["vite-plugin-pages/client"]
}
}配置状态管理
这里使用pinia而不是vuex。pinia适合中小型项目，vuex适合大型项目。
安装
npm install pinia配置
在main.ts中配置
/** 使用 Pinia 进行状态管理 */
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)使用
在src/store/目录下存放管理状态的API文件
// ./src/stores/counterStore.ts
import { defineStore } from 'pinia',
const useCounterStore = defineStore('counterStore', {
state: () => ({
counter: 0
})
})
// setup中使用
import { useCounterStore } from '../stores/counterStore'
export default {
setup() {
const counterStore = useCounterStore()
return { counterStore }
},
computed: {
tripleCounter() {
return counterStore.counter * 3
},
},
}
//来源：https://juejin.cn/post/7098631846769983501Vue-request
VueRequest ⚡️ 一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 composition API 请求库
安装
npm install vue-request使用
例如轮询数据
const { data, error, run } = useRequest(getUserInfo, {
pollingInterval: 1000, // 请求间隔时间
});配置模拟数据mocks
安装
npm i mockjs vite-plugin-mock --save-dev这里有个vite-plugin-mock版本问题。3.0.0版本运行时报错。我之后重新安装了2.9.6.
卸载 3.0.0 ：npm uninstall vite-plugin-mock -D
安装2.9.6：npm install [email protected] -D
配置
-vite.config.ts。autoimport在下一部分导入。目前会报错。
import { viteMockServe } from 'vite-plugin-mock'
viteMockServe({
// mockPath: 'mock', // 模拟.ts文件的存储文件夹
// watchFiles: true, // 监视mockPath对应的文件夹内文件中的更改
// logger: true, // 在控制台显示请求日志
// supportTs: true, // 读取 ts 文件模块,无法监视.js文件
// ignore: undefined, // 自动读取模拟.ts 文件时，忽略指定格式的文件
// localEnabled: process.env.NODE_ENV === 'development',
// prodEnabled: process.env.NODE_ENV === 'production',
})
AutoImport({
imports: [
//...
{
'vue-request': [
'useRequest',
'usePagination',
]
}
]
})
新建
在项目目录下（不是 src 目录下）新建 mock 目录存放模拟响应，例如
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/get',
method: 'get',
response: () => {
return {
code: 0,
data: {
name: 'vben',
age: 27,
height: 170,
},
}
},
},
] as MockMethod[]
使用
data: {{ data }}
loading: {{ loading }}
error: {{ error }}
配置自动导入
自动引入API
安装
npm add -D unplugin-auto-import配置
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
// https://github.com/antfu/unplugin-auto-import#configuration
AutoImport({
// 需要自动导入的文件：ts, vue, md
include: [/\.ts$/, /\.vue$/, /\.md$/],
// 注册需要全局导入的api
imports: [
// 已经预设了全局导入的包
'vue',
'vue-router',
// 需要自己定义全局导入规则的包
{
// 自己写的模块也可以全局导入
// import { useUserStore } from '~store/user'
'~store/user': ['useUserStore'],
// 安装的模块亦可以设置全局导入
'axios': [
// 还可以为默认导出设置别名
['default', 'axios']
]
},
],
// ts项目最好在src下生成auto-import.d.ts文件
dts: 'src/auto-import.d.ts',
// 生成 .eslintrc-auto-import.json 文件，消除 eslint 报错
eslintrc: {
// 启用该功能，默认为 fasle，需要改为 true 才能生效
enabled: true,
// 生成的文件路径
filepath: './.eslintrc-auto-import.json',
// true | false | 'readonly' | 'readable' | 'writable' | 'writeable'
globalsPropValue: true,
},
// custom resolvers
resolvers: [/*...*/]
})
],
})
完成上述配置之后，重启应用和编辑器，正常情况下应该生成下面两个文件：
.eslintrc-auto-import.json：用于兼容 eslint 检查
src/auto-import.d.ts：用于兼容 ts 编译器检查
将 "./.eslintrc-auto-import.json" 规范加入到 eslint 的 extends 里面。
自动引入组件
unplugin-vue-components 插件可以实现组件和资源的按需自动引入。
安装
npm add -D unplugin-vue-components配置
在vite.config.ts中增加代码
import AutoComponents from 'unplugin-vue-components/vite'
AutoComponents({
dts: 'src/auto-components.d.ts',
}) // to plugins
dts
dts 为 TypeScript 生成类型注解，默认位置为 ./components.d.ts
确保生成的 src/auto-components.d.ts 位于 tsconfig.json 的 include 中。
将生成的 src/auto-components.d.ts 添加到 .eslintignore 中。
将生成的 src/auto-components.d.ts 添加到 .gitignore 中。
resolvers
unplugin-vue-components 内置了一些 UI 库的解析器。
//vite.config.ts
import AutoComponents from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
AutoComponents({
resolvers: [
NaiveUiResolver(),
]
})
自动引入图标
安装
npm add -D unplugin-icons配置
import AutoComponents from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
AutoComponents({ resolvers: [ IconsResolver() ] })，
Icons() //在plugin中将 unplugin-icons 插件添加到 vite 的插件列表中。
在 unplugin-vue-component 插件的 resolvers 配置项中添加 unplugin-icons 的自动导入解析器。
设置自动导入后，会在 auto-components.d.ts 文件中从虚拟文件中导入图标组件，例如
declare module 'vue' {
export interface GlobalComponents {
IMdiAbTesting: typeof import('~icons/mdi/ab-testing')['default']
}
}
使用
报错
此时，ts 解析器不能识别 ~icon/* 模块，需要在 ts 解析器配置中加入关于此虚拟模块的类型说明：
{
"compilerOptions": {
"types": [
"unplugin-icons/types/vue3",
]
}
}
安装图标库
该插件使用的图标库是 Iconify，该图标库集成了众多的图标源，可以全部安装，也可以按需安装。具体使用可以查看以下iconify板块。
全部安装
npm add -D @iconify/json按需安装
npm add -D @iconify-json/mdi引入本地资源
引入SVG
vite-svg-loader 插件能够让我们像引用组件那样引用 SVG 文件。
安装
npm add -D vite-svg-loader配置
//vite.config.ts
import svgLoader from 'vite-svg-loader'
svgLoader()使用
导入为组件
import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg'
导入为字符串
import iconRaw from './my-icon.svg?raw'
// '...'
导入为url
import iconUrl from './my-icon.svg?url'
// '/assets/my-icon.2d8efhg.svg'
使用例子
引入位图
vite-plugin-vue-images 插件用来自动导入图片。
安装
npm add -D vite-plugin-vue-images配置
//vite.config.ts
import VueImages from 'vite-plugin-vue-images'
export default {
plugins: [
VueImages({
// 配置图片存放位置，下面是默认值
dirs: ['src/assets/img'],
// 配置支持自动导入的图片的类型，下面是默认值
extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'],
// 自定义文件名到组件名的解析器，默认为 hello-world => HelloWorld 格式
customResolvers: [],
// 不知道干嘛的参数
customSearchRegex: '([a-zA-Z0-9]+)'
})
]
}
使用
![]()
添加顶部进度条
nprogress 包可实现这个功能。
安装
npm add nprogress
npm add -D @types/nprogress
配置
//main.ts
/** NProgress */
// index.html 中通过 #nprogress .bar 修改进度条颜色
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({
// 进度环
showSpinner: true,
// 动画效果，例如淡入淡出等
easing: 'ease', // linear, ease-in, ease-out, ease-in-out., cubic-bezier
speed: 500, // 动画速度
// 最低百分比
minimum: 0.3,
})
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
报错
模块 ""e:/VisualC/vue/nhtest01/node_modules/@types/nprogress/index"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入
根据提示我们可以去 tsconfig.json中compilerOptions对象下添加设置allowSyntheticDefaultImports为true就可以了。
修改进度条颜色
进度条控制
NProgress.set(0.4) // 40%
vite-plugin-md2vue
将md文件转化成vue文件
安装
npm add -D vite-plugin-md2vue
配置
//vite.config.ts
import vitePluginMd2Vue from 'vite-plugin-md2vue'
vitePluginMd2Vue()
//vite-env.d.ts
declare module '*.md' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
使用
import TestMd from './test.md'
vite-plugin-restart
通过监听文件修改，自动重启 vite 服务。[github]
修改某些文件，需要重启才能生效，例如 vite.config.js 和 .env.development 文件。
安装
npm add -D vite-plugin-restart
配置
//vite.config.ts
import ViteRestart from 'vite-plugin-restart'
ViteRestart({ restart: ['vite.config.ts', '.env.development'] })
生产时移除console
//vite.config.ts
export default defineConfig({
build: {
minify: 'terser',
terserOptions: {
compress: {
// 生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
},
})
组件库
naive ui
安装
npm i -D naive-ui因为前面配置了自动引入，所以 UI 组件不需要全局引入，也不需要直接引入，直接在模板中使用即可。图标组件还是需要直接引入，他也应该被直接引入
使用
naive-ui 图标库
xicons
按需引入，在官网上www.xicons.org找到先引入的图标，查看所在库，然后下载
npm i -D @vicons/ionicons5
使用
记得要先下载naive-ui，n-icon是naive-ui组件
import { GameControllerOutline } from '@vicons/ionicons5'1.
iconify
官网：Iconify Design: All popular icon sets, one framework.
以 闹钟这个图标为例alarm • coolicons • Iconify
安装
npm install --save-dev @iconify/vue在你要添加的vue文件中导入
import { Icon } from '@iconify/vue';
样式库
Tailwind CSS是一个功能类优先的 CSS 框架。可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它提供更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。
安装
npm add -D windicss vite-plugin-windicss配置
//vite.config.ts
import WindiCSS from 'vite-plugin-windicss'
WindiCSS()//放plugin里//main.ts
import 'virtual:windi.css'
模板提示
vscode安装扩展windicss intelligence
工具库
lodash
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
安装
npm i --save lodash使用
const _ = require('lodash')
_.sum(array);
// 求平均值
_.mean(array);Vueuse
vueuse 就是这么一个工具集。里面封装了许多常用功能，开箱即用，非常方便。工具库划分了几个大类：broswer(浏览器相关)，Sensors(传感器相关)，Animation(动画相关)。
安装
npm i -D @vueuse/core使用
例如点击复制文字：useClipboard
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
测试框架
vitest
安装
npm install -D vitest配置
//vite.config.ts
/// Vitest 也可以在项目中通过在根文件夹中添加 vitest.config.js 文件来配置。如果这个文件存在，它将优先于 vite.config.js 来配置Vitest
使用
具体见试试使用 Vitest 进行组件测试，确实很香。 - 掘金 (juejin.cn)