Vite是什么
Vite本身与框架无关,是一套基于插件的项目工程架构,是新的一套对开发者比较友好的一套构建和开发的工具,它的特点就是快,它不会随着项目的规模的变大而让你的开发过程变得卡顿。总的来说就是:Vite是一个开发构建工具,开发过程中它利用浏览器的native ES Module特性按需导入源码,预打包依赖。是为了开发者量身定做的一套开发工具。特点:启动快,更新快。
Vite工作原理
我们观察Vite工程项目的结构发现在根目录出现了一个index.html文件,这个文件有点相当于我们之前的webpack工程项目里html模版入口文件。其中最大的变化就是script标签引用是用ES6的原生模块化type="module"
进行引用,即是esmodule。
<script type="module" src="/src/main.ts"></script>
复制代码
也就是说在你的项目里面你可以使用ES6方式进行写代码,将来浏览器会把你import的文件再用http方式向服务器进行请求。如下图:
在main.js里面import了vue.js,App.vue,index.css三个文件,后续都进行http请求相关文件内容。
我们再观察App.vue请求回来的内容:
已经是进行了解析之后的内容。
我们再观察到App.vue请求响应是Content-Type: application/javascript
也就是说App.vue文件不再是我们写的那个vue文件,而且一个经过vite服务器解析之后的可以被浏览器执行的js文件。
安装
npm init @vitejs/app
复制代码
我选择的vue-ts默认配置
资源引用
将资源引入为URL
服务时引入一个静态资源会返回解析后的公共路径:
import logo from "./assets/logo.png"
复制代码
使用
<img alt="logo" :src="logo" />
复制代码
我们可以看到解析后的图片地址变成了一个绝对地址
css背景里引用图片
.logo {
background-image: url(./assets/logo.png);
width: 100px;
height: 100px;
}
复制代码
设置别名
在vite.config文件里设置
export default defineConfig({
resolve: {
alias: {
'@': resolve('./src'),
'comps': resolve('./src/components')
}
},
plugins: [vue()]
})
复制代码
全局样式
可以在main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
复制代码
css模块化
使用module模块化方式写css
<style module>
.logo {
background-image: url(@/assets/logo.png);
width: 200px;
height: 200px;
}
</style>
复制代码
这样写了之后就会得到一个$style的变量
<div :class="$style.logo"></div>
复制代码
这样写的好处就是类名会进行hash变成唯一的类名
还可以使用约定的方式书写
import styles from './App.module.css'
复制代码
<div :class="styles.logo"></div>
复制代码
sass或less样式处理器
项目规模变大之后,我们要组织更多样式的时候,我们通常会引入sass或less这样的样式处理器
只需要安装一下sass就可以了,不需要额外配置,比如像webpack那样安装loader
npm i -D sass
复制代码
<style scoped lang="scss">
$link-color: red;
a {
color: $link-color
}
</style>
复制代码
autoprefixer 配置
安装autoprefixer
npm i autoprefixer -D
复制代码
然后在根目录添加一个postcss.config.js的文件
module.exports = {
plugins: [
require('autoprefixer'),
]
}
复制代码
写一个
::placeholder{
color: $link-color
}
复制代码
自动加上了前缀
ts配置
Vite原生就整合了ts,你并不需要进行太多的额外配置就可以使用了,可以在package.json里配置限制TypeScript的版本
"devDependencies": {
"typescript": "^4.3.2",
}
复制代码
配置代理服务器
在根目录vite.config文件进行如下配置就可以了
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://www.baidu.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
})
复制代码
数据mock
安装依赖
npm i mockjs -S // 运行时依赖所以-S
npm i vite-plugin-mock -D
复制代码
在根目录的vite.config文件还需要进行如下的配置
import {viteMockServe} from 'vite-plugin-mock'
export default defineConfig({
plugins: [viteMockServe({})],
})
复制代码
在根目录下新建一个mock文件
写上一个模拟接口
export default [
{
url: "/api-dev/user/list",
method: "get",
response: req => {
return {
code: 0,
data: [{ id: 1, name: "coboy" }, { id: 2, name: "cobyte" }],
};
},
}
];
复制代码
再写上一个请求
fetch("/api-dev/user/list").then(res => res.json()).then(r=> console.log(r))
复制代码
书写配置正确就可以在控制台看到打印的数据了。
代码规范
使用eslint + prettier 规范项目代码,eslint做规范化的检测,prettier做格式化的操作
安装依赖
{
"@typescript-eslint/eslint-plugin": "^4.15.2",
"@typescript-eslint/parser": "^4.15.2",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vuedx/typescript-plugin-vue": "^0.6.3",
"eslint": "^7.20.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.6.0",
"prettier": "^2.2.1",
}
复制代码
eslint通过eslint-plugin-vue插件对.vue文件进行校验
配置.eslintrc.js文件
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint'
],
parserOptions: {
ecmaVersion: 2021
},
plugins: [],
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'off'
}
}
复制代码
配置package包检测命令
"lint": "eslint --ext .ts,tsx,vue src/** --no-error-on-unmatched-pattern --quiet",
"lint:fix": "eslint --ext .ts,tsx,vue src/** --no-error-on-unmatched-pattern --fix"
复制代码
--quiet 不显示警告
--fix 自动修复
配置忽略检查的文件.eslintignore
*.css
*.less
*.scss
*.jpg
*.png
*.gif
*.svg
*vue.d.ts
复制代码
测试配置
使用jest和@vue/test-utils测试组件
安装依赖
"jest": "^26.6.3",
"@types/jest": "^26.0.20",
"vue-jest": "^5.0.0-alpha.7",
"babel-jest": "^26.6.3",
"@babel/preset-env": "^7.12.17",
"@vue/test-utils": "^2.0.0-beta.9",
"ts-jest": "^26.5.1",
"@babel/preset-typescript": "^7.12.17",
复制代码
配置jest.config.js文件
module.exports = {
transform: {
// 用 `vue-jest` 处理 `*.vue` 文件
'^.+\\.vue$': 'vue-jest',
'^.+\\.jsx?$': 'babel-jest', // Adding this line solved the issue
'^.+\\.tsx?$': 'ts-jest',
},
// support alias
moduleNameMapper: {
'^@/components(.*)$': '<rootDir>/src/components$1',
},
testMatch: ['**/tests/unit/**/*.[jt]s?(x)'],
}
复制代码
在tsconfig.json文件里配置jest
"compilerOptions": {
"types": ["vite/client", "jest"],
}
复制代码
在package.json里配置运行命令
"test:unit": "jest"
复制代码
ts有可能存在一些比较前卫的语法,所以需要配置一下babel
配置babel.config.js
module.exports = {
presets: [
["@babel/preset-env", { targets: { node: "current" } }],
"@babel/preset-typescript",
],
};
复制代码
提交的时候跑lint同时跑测试
安装依赖
"lint-staged": "^10.5.4",
"yorkie": "^2.0.0"
复制代码
"gitHooks": {
"pre-commit": "lint-staged",
"pre-push": "npm run test:unit"
},
"lint-staged": {
"*.{js,vue}": "eslint --fix"
},
复制代码
在根目录配置一个测试文件
tests/unit/example.spec.ts
import HelloWorld from "../../src/components/HelloWorld.vue";
import { shallowMount } from "@vue/test-utils";
describe("test", () => {
test("should ", () => {
const wrapper = shallowMount(HelloWorld, {
props: {
msg: "hello,coboy",
},
});
expect(wrapper.text()).toMatch("hello,coboy");
});
});
复制代码
执行git commit -m "xxx"时候出现如下结果表示配置成功
执行git push的时候出现如下结果表示配置成功
Error Unexpected trailing comma. comma-dangle
错误Eslint代码检测report数据
vs code的“文件-首选项-设置”,搜索“comma”,把:
Prettier: Trailing Comma
设置为“none”。