首页 /
正文
vite搭建vue3项目
vite官网: https://cn.vitejs.dev/guide/
前言
- 浏览器原生就支持es模块化，但在使用node_modules库时，可能加载上百个模块的js代码，对于浏览器发送请求是巨大的消耗；
- 其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；
vite利用浏览器原生就支持es模块化的特性，减少不必要的打包，对vue、less等文件转换成es模块，浏览器请求这类文件时，vite将请求拦截，返回转换后的es模块。
vite原理
vite启动会使用connect搭建本地服务器，浏览器请求的还是.less、.ts等文件。vite将这些请求拦截，转发给相同文件名的文件，这些文件里面的内容已不是原来代码而是vite转换好的es模块代码。
一. 搭建vue3项目初步
1.1 创建package.json文件
npm init -y
1.2 安装vite
npm install vite -d1.3 启动vite
- 新建index.html
- 启动vite
npx vite
1.4 vue3的支持
1.4.1 初步支持
- 安装vue3
npm install vue@next创建
src/main.js因为现在没有引入vue模板编译器，所以只能用h函数展示数据。
import { createApp, h } from "vue";
const app = {
data() {
return {
content: "helloworld",
};
},
render() {
return h("h1", null, this.content);
},
};
createApp(app).mount("#app");- 修改
index.html
<body>
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>- 浏览器显示效果
1.4.2 单文件支持
- 安装插件
npm install @vitejs/plugin-vue -D- 新建
xiu.config.js配置文件
import vue from "@vitejs/plugin-vue";
module.exports = {
plugins: [vue()],
};package.json配置script
"serve": "vite --config xiu.config.js",- 启动
npm run serve完成上面步骤即可支持vue单文件组件
- 新建
App.vue
<template>
<h1>{{ content }}</h1>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
setup() {
return {
content: "hello world2",
};
},
});
</script>main.js改为下面内容
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");- 浏览器内容
vite对vue的插件
- Vue 3 单文件组件支持：
@vitejs/plugin-vue - Vue 3 JSX 支持：
@vitejs/plugin-vue-jsx - Vue 2 支持：
underfin/vite-plugin-vue2
二. vite对其他类型支持
2.1 对ts的支持
原生就支持，它会直接使用ESBuild来完成编译
- 修改App.vue
<template>
<div>
<h1>{{ content }}</h1>
<h1>{{ testRef }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const testRef = ref<string>();
testRef.value = "hello world ts";
return {
testRef,
content: "hello world2",
};
},
});
</script>- 浏览器刷新
ESBuild的特点：
- 超快的构建速度，并且不需要缓存；
- 支持ES6和CommonJS的模块化；
- 支持ES6的Tree Shaking；
- 支持Go、JavaScript的API；
- 支持TypeScript、JSX等语法编译；
- 支持SourceMap；
- 支持代码压缩；
- 支持扩展其他插件；
- 不用babel了
2.2 对css的支持
vite可以直接支持css的处理
- 直接导入css即可；
- Vite对less css的支持，安装后不用配置，不像webpack要配置loader
npm install less -D 
- vite直接支持postcss的转换：
只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；
npm install postcss postcss-preset-env -Dpostcss.config.js
module.exports = {
plugins: [require("postcss-preset-env")]
}
三. Vite打包项目
npx vite build --config xiu.config.js
开启一个本地服务来预览打包后的效果：
npx vite preview
1
1
1
1
1
1
1
1
1
1