赞
踩
Vite
1、特点
1.开发时效率极高
2.开箱即用, 功能完备
3.社区丰富, 兼容rollup的特性
4.超高速的热重载
5.预设应用和类库打包模式, 减少了我们很多需要自己配置的内容
6.与前端类库无关的工具
2、什么是vite
是构建工具的高阶封装
3、目标
1.使用简单
2.快
3.便于扩展
4、区别
1.High Level API
2.不包含自己的编译能力
3.完全基于ESM加载的方式来进行开发的
4.减少了很多配置的工作
5、创建vue3项目
使用vite创建项目
npm init @vitejs/app
使用vite指定模板创建项目
npm init @vitejs/app my-vue-app --template vue 【npm 6.x】
npm init @vitejs/app my-vue-app – --template vue 【npm 7.x】
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from “@vitejs/plugin-vue-jsx"
export default defineConfig({
plugins: [vue(), vueJsx()],
})
6、创建vue2项目
自己通过脚手架建立一个空的项目
npm install vite-plugin-vue2
import { createVuePlugin } from “vite-plugin-vue2"
export default {
plugins: [createVuePlugin()],
}
通过现有的模板进行创建
github: github.com/matt-auckland/vite-vue2-starter
7、创建react项目
FastRefresh
解决了很多react热加载插件无法解决的问题
速度快
支持局部更新
npm init @vitejs/app my-react-app --template react
创建项目时vite会自动安装@vitejs/plugin-react-refresh插件
import { defineConfig } from 'vite’
import reactRefresh from ‘@vitejs/plugin-react-refresh’
export default defineConfig({
plugins: [reactRefresh()]
})
8、vite中使用css
// vite.config.js
import { defineConfig } from “vite"
import vue from “@vitejs/plugin-vue"
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
“@styles”: “/src/styles”,
},
},
})
css变量、引入css以及console的使用
@import url(”@styles/other.css”);
:root {
–main-bg-color: blue;
}
.root {
// @console.error hello root
color: var(–main-bg-color);
}
// postcss.config.js
module.exports = {
plugins: [require(”@postcss-plugins/console”)]
}
css module的使用
import { defineComponent } from 'vue’
import classes from '@styles/test.module.css’
// moduleClass为样式表中的样式类
export default defineComponent({
setup() {
return () => {
return <div class={root ${classes.moduleClass}
}>Hello Vue3 Jsx;
}
}
})
vite天生支持less等预编译工具, 只需要npm相应预编译即可
9、vite中使用typeScript
只编译, 不校验
export interface A {
name: string;
age: Number;
}
export const a: A = {
name: “Jokcy”,
age: ‘18’ // 这时候如果没有特殊配置的话页面还是可以正常编译, 但是没有报错提示
}
tsc --noEmit && vue-tsc --noEmit
“scripts”: {
“build”: "vue-tsc --noEmit && tsc --noEmit && vite build"
},
“dependencies”: {
“typescript”: “^4.3.4”,
“vue-tsc”: "^0.1.7"
}
tsconfig
{
“compilerOptions”: {
“target”: “esnext”,
“module”: “esnext”,
“moduleResolution”: “node”,
“strict”: true,
“jsx”: “preserve”,
“sourceMap”: true,
“resolveJsonModule”: true,
“esModuleInterop”: true,
“lib”: [“esnext”, “dom”],
“types”: [“vite/client”], // * 引入模块必须配置的项
“isolatedModules”: true // * 配置独立模块导出
},
“include”: [“src//*.ts", "src//.d.ts", "src/**/.tsx”, "src//*.vue"]
}
10、vite中处理静态资源的方法
types url, raw, worker
import test from “./test?url” // 仅仅返回的是路径
import test from “./test?raw” // 把代码以字符串的形式展示出来
console.log(test)
// main.js
import Worker from './worker?worker’
const worker = new Worker()
worker.onmessage = (e) => {
console.log(e) // 开启一个线程, 执行一部分代码, 定时监听
}
resolve
resolve: {
alias: {
“@styles”: "/src/styles"
}
}
// 使用
import “@styles/test.less”
11、vite中集成eslint && pritter
依赖
“devDependencies”: {
“eslint”: “^7.29.0”,
“eslint-config-standard”: “^16.0.3”,
“eslint-plugin-import”: “^2.23.4”,
“eslint-plugin-node”: “^11.1.0”,
“eslint-plugin-promise”: "^5.1.0"
}
根目录新建.eslintrc.js文件
module.exports = {
extends: ‘standard’,
globals: {
postMessage: true
},
rules: {
‘space-before-function-paren’: 'off’
}
}
自动格式化 新建.prettierrc文件, vscode安装prettier-code插件
// vscode设置勾选 format on save, 保存时自动格式化
{
“semi”: false,
“singleQuote”: true
}
命令校验是否符合规则
“scripts”: {
“lint”: "eslint --ext js src/"
}
12、vite中的env变量
使用
import.meta.env
/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。