Vite 开发快速入门
需要相关视频教程的，可以私聊我，免费提供~
Vite 简介
Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
优点
- 非常非常的快： 比 Vue-cli(基于 Webpack)快 10-100 倍
- 上手非常简单： 没有很多复杂晦涩的配置，开发效率高
- 扩展兼容性强： 兼容支持 React、Svelte、Preact、Vanilla 等，这意味着 Vite 可以被应用在大多数现代技术栈中。兼容 Rollup 插件，这意味着可以复用 Rollup 生态中大部分已经被反复锤炼的工具
缺点
- 只能针对现代浏览器（ES2015+）
- 与 CommonJS 模块不完全兼容
相关文献
安装及创建项目
Vite创建Vue3项目
Vite创建Vue2项目
Vite创建React项目
- 运行项目：
npm run dev或npx vite - 编译项目：
npm run build或npx vite build
Vite中使用CSS
1. Vite是自动支持css的
2. Vite支持pre-processors
Vite也天然支持sass、less、stylus 等预处理器
只需安装插件， vite 会自动调用
npm install sass -D
<template>
<h1 class="text">
Hello Vue 3 + Vite
<a href="">vite</a>
</h1>
</template>
<style scoped lang="scss">
.text {
a {
color: #42b983;
}
}
</style>
3. 支持原生css variable
css variables 让我们可以在CSS中使用变量了
4. 配置别名
为styles文件夹配置别名，方便在项目中引用styles目录下的文件
vite.config.js：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"@": "/src/"
}
}
})
组件中使用别名：
<script setup>
// import '../styles/index.css'
import '@/styles/index.css'
</script>
5. css中引入其他css文件
other.css：
/* other.css中引入index.css */
@import url("@/styles/index.css");
6. 支持css-modules
在 styles 下创建 test.module.css 文件，该文件会被自动识别成 css modules 的文件
通过 classes.moduleClass 获取样式
Vite中使用TypeScript
1. 对于Vite中.ts文件
Vite天生支持TypeScript，并不需要任何插件和配置
但Vite只编译ts，并不会校验
接口users中并没有声明age的类型，TS会报错，但在Vite中能正常编译，控制台和命令行中也都不会报错，并不会校验
如果需要类型校验，则需要配置 tsc--noEmit
在 package.json 中：
修改 "build": "vite build" 为 "build": "tsc --noEmit && vite build"
{
"name": "vite-vue3",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vitejs/plugin-vue-jsx": "^1.1.8",
"@vue/compiler-sfc": "^3.2.6",
"sass": "^1.41.0",
"vite": "^2.5.4"
}
}
新建 tsconfig.json，并配置：
{
"compilerOptions": {
"baseUrl": "./src",
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"isolatedModules": true,
"noEmit": true,
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
]
}
这时候执行 npm run build 或 npx vite 则会进行类型校验，命令行出现了错误信息：
更正错误后，即可正常打包：
2. 对于Vite中.vue文件
安装插件：npm install vue-tsc
在 package.json 中：
修改 "build": "vite build" 为 "build": "vue-tsc --noEmit && tsc --noEmit && vite build"
{
"name": "vite-vue3",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.6",
"vue-tsc": "^0.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.1",
"@vitejs/plugin-vue-jsx": "^1.1.8",
"@vue/compiler-sfc": "^3.2.6",
"sass": "^1.41.0",
"vite": "^2.5.4"
}
}
Vite中处理静态资源
1. 处理图片
-
在
.jsx中引入：import { defineComponent } from 'vue'; import logo from '@/assets/logo.png'; export default defineComponent({ setup() { return () => { return ( <img src={logo} /> ); }; }, }); -
在
.vue中引入：<template> <img src="/src/assets/logo.png"> <!-- 或 --> <img :src="img"> </template> <script> import { ref } from "vue"; export default { setup () { const img = ref('/src/assets/logo.png') return { img }; }, }; </script>
2. import url 的参数
test.ts ：
interface users {
name: string;
age?: number;
}
export const my: users = {
name: 'bing',
age: 20,
};
在 .jsx 中：
import { my } from '../src/test';
import test1 from '../src/test?url';
import test2 from '../src/test?raw';
console.log(my); // 打印出对象
console.log(test1); // 打印出路径
console.log(test2); // 打印出内容
3. 处理JSON
import pkg from '../package.json';
import { name, version } from '../package.json';
console.log(pkg); // 打印出整个json
console.log(name, version); // 打印出json中指定的值
Vite 集成 eslint 和 prettier
1. 集成 eslint
- 安装4个 eslint 插件：
npm install eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D - 创建 eslint 的配置文件
.eslintrc.jsmodule.exports = { extends: "standard" } - eslint 可忽略指定文件和目录，创建
.eslintignore文件：build/*.js src/assets public dist
2. 集成 prettier
- 在 vscode 中安装
Prettier - Code formatter插件 - 创建 prettier 的配置文件
.prettierrc.js{ "semi": false, "singleQuote": true } - 常见的一些配置
"prettier.printWidth": 1000, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 "prettier.parser": "babylon", // 格式化的解析器，默认是babylon "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
Vite中使用环境变量
1. import.meta.env
在vite中可直接使用 import.meta.env 来获取 env 环境变量，正式环境无效
console.log(import.meta.env, import.meta.env.MODE);
2. .env.development
在根目录下创建 .env.development 文件，并添加自定义属性（自定义属性需要加上前缀VITE_，才能被获取）
VITE_TITLE=Hello Vite1
VITE_MODE=development
通过npm run dev 或 npx vite（开发环境），可获取.env.development中的自定义属性
console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性
3. .env.production
在根目录下创建 .env.production 文件，并添加自定义属性（自定义属性需要加上前缀VITE_，才能被获取）
VITE_TITLE=Hello Vite2
VITE_MODE=production
通过npm run build 或 npx vite build（生产环境），可获取.env.production中的自定义属性
console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性
4. .env.test
在根目录下创建 .env.test 文件，并添加自定义属性（自定义属性需要加上前缀VITE_，才能被获取）
VITE_TITLE=Hello test
VITE_MODE=test
修改 package.json 文件，通过不同的 mode 来改变环境变量读取的方式：
"scripts": {
"dev": "vite --mode test"
},
通过npm run dev（通过 mode 读取 .env.test 的环境变量），可获取.env.test中的自定义属性
console.log(import.meta.env);
console.log(import.meta.env.VITE_TITLE, import.meta.env.VITE_MODE); // 获取自定义属性
非常灵活和方便
