Vite
是构建工具,高阶封装,Vite
的特点,如下所示:
开发时效率极高开箱即用,功能完备社区丰富,兼容 rollup
超高速热重载预设应用和类库打包模式前端类库无关
Vite
的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server
等等。Vite
和传统构建工具的区别,如下所示:
High Level API
不包含自己编译能力完全基于 ESM
加载方式的开发时
Vite
减少了很多配置量,减少的工作,如下所示:
dev server
各类 loader
build
命令
Vite
的优势,如下所示:
上手非常简单开发效率极高社区成本低没有晦涩的配置有自身的插件系统,生态兼容 rollup
插件
vite
更合理的类比,如下所示:
vue-cli
create-react-app
cra
需要 eject
vue-cli
的 configureWebpack
和 chainWebpack
传统的构建工具,entry
-> 多个 route
-> 多个 module
-> Bundle
-> Server ready
。对于 Vite
来说, Server ready
-> HTTP request
-> entry
-> 多个 route
-> 多个 module
,这是使用了 Esbuild
工具。Vite
是伴随 Vue3
正式版一起发布,1.0 版本中以 Vue3
为主,2.0 版本中跨框架。
二、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 JSX、vite 创建 vue2 项目、vite 创建 react 项目、postcss、@import alias、css-modules 和 css pre-processors
Vite
创建 vue3
项目,如下所示:
通过 npm init @vitejs/app
命令开始创建项目,如图所示:
需要确认以下的信息,如图所示:
名称 | 作用 |
---|---|
Project name | 输入项目的名字,选择确认,如 vite-vue3 |
Select a framework | 选择创建的模版,有 vanilla、vue、react、preact、lit、svelte 等模版信息,选择 vue |
Select a variantb | 选择创建的格式,有 ts 版本和无 ts 版本,如 vue 和 vue-ts ,选择 vue |
cd vite-vue3
,通过 npm install
命令下载依赖,通过 npm run dev
命令启动项目,如图所示:在使用
vite
创建的 vue3
项目中,如果想使用 jsx
,如下所示:
通过 yarn add @vitejs/plugin-vue-jsx -D
命令下载插件在 vite.config.js
中,引入 plugin-vue-jsx
插件,代码如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig({
plugins: [vue(), vueJsx()]
})
在 src
目录下创建 App.jsx
,代码如下:
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return () => {
return <div>hello vue3 jsx</div>;
};
}
});
在 main.js
中,引入 App.jsx
,代码如下:
import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')
Vite
创建 vue2
项目,如下所示:
通过 npm init @vitejs/app
命令开始创建项目,如图所示:
需要确认以下的信息,如图所示:
名称 | 作用 |
---|---|
Project name | 输入项目的名字,选择确认,如 vite-vue2 |
Select a framework | 选择创建的模版,有 vanilla、vue、react、preact、lit、svelte 等模版信息,选择 vanilla |
Select a variantb | 选择创建的格式,有 ts 版本和无 ts 版本,选择 vanilla |
创建完成后,切换项目目录,如 cd vite-vue2
,通过 npm install
命令下载依赖,通过 npm run dev
命令启动项目,如图所示:
通过 yarn add vite-plugin-vue2 -D
命令下载 vite-plugin-vue2
插件,通过 npm install [email protected] -S
命令下载 vue
,新建 vite.config.js
文件,代码如下:
import { createVuePlugin } from "vite-plugin-vue2";
export default {
plugins: [createVuePlugin()],
};
新建 src
目录,将 main.js
移入 src
中,修改 index.html
中 main.js
的引入路径,新建 App.vue
并引入到 main.js
中,main.js
如下:
import Vue from "vue";
import App from "./App.vue";
new Vue({
el: '#app',
render: (h) => h(App),
}).$mount();
react-hot-loader
,fastRefresh
,优势,如下所示:
解决很多 rhl
无法解决的问题速度更快支持局部更新
Vite
创建 react
项目,如下所示:
通过 npm init @vitejs/app
命令开始创建项目,如图所示:
需要确认以下的信息,如图所示:
名称 | 作用 |
---|---|
Project name | 输入项目的名字,选择确认,如 vite-react |
Select a framework | 选择创建的模版,有 vanilla、vue、react、preact、lit、svelte 等模版信息,选择 react |
Select a variantb | 选择创建的格式,有 ts 版本和无 ts 版本,如 react 和 react-ts ,选择 react |
cd vite-react
,通过 npm install
命令下载依赖,通过 npm run dev
命令启动项目,如图所示:
在 vite
中,推荐使用 css variable
进行使用,并且也已经集成了 postcss
,会通过 postcss
进行编译,有各种 postcss-plugins
插件,如下所示:
新建 postcss.config.js
文件,引入 postcss-plugins/console
,它可以在编译 css
的时候进行输出,代码如下:
module.exports = {
plugins: [require("@postcss-plugins/console")],
};
新建 index.css
文件,代码如下:
:root {
--main-bg-color: blue;
}
.root {
/* 编译 css 的时候进行输出 */
@console.error hello root
color: var(--main-bg-color);
}
在 vite
中,可以使用 @import alias
进行文件的别名设置,如下所示:
在 vite.config.js
中,设置 alias
,代码如下:
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: {
"@styles": "/src/styles",
}
}
})
在 styles
目录中,新建 index.css
和 other.css
,在 index.css
中引入 other.css
,代码如下:
@import url("@styles/other.css");
:root {
--main-bg-color: blue;
}
.root {
@console.error hello root
color: var(--main-bg-color);
}
在 App.jsx
中,引入 index.css
,代码如下:
import "@styles/index.css";
在 vite
中,支持 css-modules
,以 modules.css
结尾的文件就会被自动识别为 css-modules
文件进行使用,比如新建 test.modules.css
文件,在 App.jsx
中使用,代码如下:
import { defineComponent } from 'vue';
// import './styles/index.css';
import "@styles/index.css";
import classes from '@styles/test.modules.css';
export default defineComponent({
setup() {
return () => {
return <div class={`root ${classes.moduleClass}`}>hello vue3 jsx</div>;
};
}
});
在 vite
中,也支持 css pre-processors
,比如使用 less
进行样式的修改,可以使用 yarn add less
命令添加 less
。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)