preface

Due to the business needs of the company, the author wants to develop a front-end application of H5. In terms of technology selection, the author decided to use Vite for development. Why use Vite? Because browsers in the past did not support ES Module, traditional packaging tools such as WebPack, when there are many modules, the packaging time will become very long, such a development experience is not very good. And after the author used vite, found that its speed finches feed very fast. (Mostly because I wanted to try new tools, lol)

Details reference: vite official Chinese document

Example project: Github address

Create a project

Note: Vite requires a version of Node.js >= 12.0.0; // If the node version is too early, errors such as package failure will occur

Create the project using official commands

My NPM version is 6.x, and I created the project according to the command of the official document. The command is as follows:

npm init @vitejs/app demo --template vue
Copy the code

After entering the command, the console output is as follows:

We entered the project, installed the dependency, after the start of the project, found that the startup success, here will find vite start the project finches quickly.

The startup is successful as follows:

The project directory is as follows:

Delete logo. PNG under assets and.vue under Components because we don’t need them

The introduction of SCSS

// Install the following dependencies in sequence: NPM I sass -d NPM I sass-loader -d NPM I dart-sass -dCopy the code

The introduction of vue – the router

At this point a project based on Vite2.x + vue3 has been successfully created, but is something missing? The Vue family bucket must be arranged. Run the following command to install vue-router

npm i vue-router@next
Copy the code

Then create a router folder under SRC to maintain the route files.

// src/router/index.js import { createRouter, createWebHistory } from "vue-router"; Const routes = [{path: "/", name: "Index", component: () = > import (".. / page/index/index. The vue "), / / according to the path to create a. Vue file},]; Const router = createRouter({history: createWebHistory("/"), routes,}); export default router;Copy the code

Create a new page folder under the SRC file to manage our pages

// scr/page/index/index.vue

<template>
  <div>123</div>
</template>

<script>
export default {};
</script>

<style>
</style>
Copy the code

Rewrite the app.vue file

// app.vue // because SCSS is already installed, <template> <router-view :class="$style.content" /> </template> <style lang=" SCSS "module>.content { width: 100%; height: 100%; } </style>Copy the code

The introduction of vuex

Run the following command to import vuex:

npm install vuex@next
Copy the code

Create a new store folder under SRC to manage our vuex files

// scr/store/index.js

import { createStore } from "vuex";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});
Copy the code

Main. js imports router and vuex configurations

At this point, we have created the vue-Router and the vuex folder. At this point, we need to import the 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");

Copy the code

At this time, our project has successfully introduced Vue-Router and VUex, and started project verification!

Use JSX instead of.vue files

Thanks to VUe3’s support for JSX, we can write our components using JSX. At this point, we can modify our index.vue component to the index. JSX file. Note: you need to change the file suffix on the 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;Copy the code

At this point, when we start the project, we will find an error, the error is as follows:

Since we are not using JSX in React, we need to add a configuration to vite’s configuration file:

// vite.config.js import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], esbuild: JSX jsxFactory: "h", jsxFragment: "Fragment", jsxInject: "import {h} from 'vue';" ,}});Copy the code

Start the project again at this point, we will find that it has started successfully!

conclusion

This article shows how to build a project of Vite2.x +vue3+ Vue-Router +vuex+ SCSS that can write our components using JSX. Because the author is also in the learning stage, if there is something wrong or not rigorous writing is not good, I hope you can put forward valuable advice. I’ve also uploaded a project to Github that integrates more stuff for those of you who are interested.

Example project: Github address