前言
由于公司的业务需要，笔者要开发一个H5的前端应用。在技术选型上，笔者决定使用vite来进行开发。为什么选择使用vite呢？因为过去浏览器不支持ES Module，传统打包工具例如webpack，在模块很多的时候，打包时间会变得非常长，这样的开发体验其实不是很好。而在笔者使用过vite后，发现它的速度雀食很快。（其实最主要的原因还是因为笔者想尝试一下新工具，哈哈哈）
详情参考：vite官方中文文档
项目示例：github地址
创建项目
注意：
vite需要Node.js的版本 >= 12.0.0；// 如果node版本过低，则会出现打包失败等错误
使用官方命令创建项目
笔者的npm版本为6.x，按照官方文档的命令来进行创建项目，命令如下：
npm init @vitejs/app demo --template vue
输入命令后控制台输出如下：
我们进入项目中，安装依赖，后启动项目，发现启动成功，这里会发现vite启动项目雀食很快。
启动成功如下：
此时的项目目录如下：
删除assets文件夹下的logo.png和components下的.vue文件，因为我们不需要它们
引入scss
// 依次安装以下依赖
npm i sass -D
npm i sass-loader -D
npm i dart-sass -D
引入vue-router
此时已经成功创建了一个基于vite2.x + vue3的项目，但是是不是少了点什么呢？vue全家桶必须给安排上。
使用如下命令安装vue-router
npm i vue-router@next
然后在src下创建一个router文件夹用于维护路由文件。
// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
// 路由信息
const routes = [
{
path: "/",
name: "Index",
component: () => import("../page/index/index.vue"), // 根据路径创建一个.vue文件
},
];
// 导出路由
const router = createRouter({
history: createWebHistory("/"),
routes,
});
export default router;
在src文件加下新创建一个page文件夹用来管理我们的页面
// scr/page/index/index.vue
<template>
<div>123</div>
</template>
<script>
export default {};
</script>
<style>
</style>
改写APP.vue文件
// App.vue
// 因为此时已经安装好了scss，我们可以在项目中使用scss了
<template>
<router-view :class="$style.content" />
</template>
<style lang="scss" module>
.content {
width: 100%;
height: 100%;
}
</style>
引入vuex
使用如下命令引入vuex:
npm install vuex@next
在src目录下新建一个store文件夹用来管理我们的vuex文件
// scr/store/index.js
import { createStore } from "vuex";
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});
main.js引入router、vuex配置
此时我们已经创建好了vue-router以及vuex文件夹，此时需要在vue中引入：
// src/main.js
import { createApp } from "vue";
import router from "./router";
import store from "./store";
import App from "./App.vue";
createApp(App).use(store).use(router).mount("#app");
此时我们的项目已经成功引入vue-router以及vuex，启动项目验证！
使用jsx替代.vue文件
因为vue3对于jsx的支持，使得我们可以使用jsx来编写我们的组件。此时，我们可以修改我们的index.vue组件，把它改成index.jsx文件。注意：在router中需要修改文件后缀！！！
// src/page/index/index.jsx
import { defineComponent, ref } from "vue";
const home = defineComponent({
setup() {
const title = ref("ceshi");
return {
title,
};
},
render() {
return (
<div>
<p>{this.title}</p>
</div>
);
},
});
export default home;
此时，当我们启动项目，会发现报错了，报错如下：
因为我们不是在react中使用jsx，所以需要在vite的配置文件中加入配置:
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
esbuild: {
// 此配置是为了在vue中使用jsx
jsxFactory: "h",
jsxFragment: "Fragment",
jsxInject: "import { h } from 'vue';",
},
});
此时再次启动项目，我们会发现已经启动成功啦！
结语
此文章介绍了如何搭建一个vite2.x+vue3+vue-router+vuex+scss的项目，该项目可以使用jsx编写我们的组件。由于笔者也是在学习阶段，如果有什么地方写的不对的或者写的不严谨不好的地方，希望大家可以提出宝贵的意见。笔者也上传了一个项目至github，上面集成了更多的东西，感兴趣的小伙伴可以去看看。
项目示例：github地址
