vite2.x+vue3搭建项目,使用jsx开发(建议收藏,多多点赞)

·  阅读 1568
vite2.x+vue3搭建项目,使用jsx开发(建议收藏,多多点赞)

前言

由于公司的业务需要,笔者要开发一个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
复制代码

输入命令后控制台输出如下:

image.png

我们进入项目中,安装依赖,后启动项目,发现启动成功,这里会发现vite启动项目雀食很快。

启动成功如下:

image.png

此时的项目目录如下:

image.png

删除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,启动项目验证!

image.png

使用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;

复制代码

此时,当我们启动项目,会发现报错了,报错如下:

image.png

因为我们不是在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';",
  },
});
复制代码

此时再次启动项目,我们会发现已经启动成功啦!

image.png

结语

此文章介绍了如何搭建一个vite2.x+vue3+vue-router+vuex+scss的项目,该项目可以使用jsx编写我们的组件。由于笔者也是在学习阶段,如果有什么地方写的不对的或者写的不严谨不好的地方,希望大家可以提出宝贵的意见。笔者也上传了一个项目至github,上面集成了更多的东西,感兴趣的小伙伴可以去看看。

项目示例:github地址

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改