Vite 基础之 Vite 的认识、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 jsx、vite 创建 vue2 项目、vite 创建 react 项目、postcss
一、Vite 的认识Vite 是构建工具,高阶封装,Vite 的特点,如下所示:开发时效率极高开箱即用,功能完备社区丰富,兼容 rollup超高速热重载预设应用和类库打包模式前端类库无关Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别,如下所示:High Level API不包含自己编译能力完全
·
一、Vite 的认识
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 vue@2.6.14 -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
。
更多推荐
已为社区贡献1条内容
所有评论(0)