How to use vite to build vue3 application

1. Installation

Tip: There is currently no official translation document for VUE3.0. But someone has already translated it. Got a thumbs up from You Yuxi, here is the URL https://v3.cn.vuejs.org/

1. Install cli

Because to use vue3, you must have a higher version of cli, which must be higher than 4.5.X
So if you don't have cli installed, just install the latest version. If you already have it, you can upgrade it or uninstall it and reinstall it. It's best to install it globally.

//Global installation npm install -g @vue/cli
# OR
yarn global add @vue/cli
//Global uninstall npm uninstall -g vue-cli
# OR
yarn global remove vue-cli
//Upgrade cli
npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli
// Check the local cli version vue --version

2. Create a project

Since we are all using VUE3, let's try the latest vite build tool.
Maybe it can open the door to a new world for you.

//Create a new project npm init vite-app asiterVue3
//Enter directory cd asiterVue3
//Install dependencies npm install
//Run npm run dev

3. View Project

VUE3.0 is much simpler than VUE2.0 and the changes in main.js are also very obvious.

VUE 3.0

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";

createApp(App).mount("#app");

VUE 2.0

import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;

new Vue({
 el: "#app",
 components: { App },
 template: "<App/>",
});

Next, let's look at App.vue. The most obvious thing is that there is more than just one root node in the template node.

//This is where the Vetur plugin will report an error but it does not affect the use of <template>
 <img alt="Vue logo" src="./assets/logo.png" />
 <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
 name: 'App',
 components:
  HelloWorld
 }
}
</script>

4. Add routing Vue-Router

Since we are using VUE3.0, our VUE-ROUTER should also correspond to version 4.X.

npm install vue-router@next -S

appendix:

npm install vue-router will download version 3.0, so we need to npm install vue-router@next -S to install it. Here is the github address https://github.com/vuejs/vue-router-next/releases
As of today, October 14, 2020, the version is v4.0.0-beta.13

What should I do if I don’t know how to use it after installing it? Let's take a look at the official examples. I won't use them first. I'll just apply for CV.

appendix:
Official example address
https://codesandbox.io/s/vue-router-4-reproduction-hb9lh?file=/index.html

Due to space constraints, I only paste the main part

<script>
   const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
   const { createApp } = Vue

   const Home = {
    template: `<div>home</div>`,
   }

   const Foo = { template: '<div>foo</div>' }
   const Bar = { template: '<div>bar</div>' }

   const router = createRouter({
    history: createWebHistory(),
    routes: [
     { path: '/', component: Home },
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar },
    ],
   })

   const app = createApp({})
   app.use(router)

   window.vm = app.mount('#app')
</script>

These are the official examples, and we find that the creation of routes is a little different.
In vue2.0, mode is used to control the parameters of the routing mode, but in vue3, createRouter is used to create routing instances.
The history attribute is used as a parameter to control the routing mode

As the name suggests
The createWebHistory method returns the History mode
The createWebHashHistory method returns a Hash pattern

So let's try to add it in. First, create a new router folder in the src directory, then add an index.js file under the folder and add the following content to the file

import { createRouter, createWebHashHistory } from "vue-router";

export default createRouter({
 history: createWebHashHistory(),
 routes: [
  {
   path: "/weclome",
   component: () => import("../views/HelloWorld.vue"),
  },
 ],
});

At the same time, create a views folder under src, add a HelloWorld.vue file and add the following code, because this is the first time. I won't try other APIs, just run the effect first

<template>
 <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

Then transform our App.vue

<template>
 <router-view></router-view>
</template>

<script>
export default {
 name: "App",
 components: {},
};
</script>

Finally, modify our most important main.js file to configure the router

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import router from "./route";
createApp(App)
 .use(router)
 .mount("#app");

Start the project and enter http://192.168.1.233:3000/#/weclome in the address bar
We found what we wanted.

5. Add state management Vuex

Since we are using VUE3.0, our Vuex also needs to support the corresponding version as of today. It has been updated to 4.0.0-beta.4

appendix:
Attach the github address https://github.com/vuejs/vuex/releases

npm i vuex@next -S

Then look at the official case https://github.com/vuejs/vuex/tree/v4.0.0-beta.4

import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   count: 1,
  };
 },
});

Like the router, the writing method has also changed compared to VUE2. First, create an instance from vuex using createStore and then we also write a

Create a new store directory under the src directory and add an index.js file. Write the following content

import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   author: "Asiter",
   describe: "A boy who applies film",
  };
 },
});
 

Go back to our main.js and modify it. Add vuex

import { createApp } from "vue";
import App from "./App.vue";
import "./index.css";
import router from "./route";
import { store } from "./store";
createApp(App)
 .use(router)
 .use(store)
 .mount("#app");
 

Let’s go back to the HelloWorld.vue file in our views and modify it.

<template>
 <div>helloWord!weclome to Vue3.0.Asiter</div>
</template>

<script>
export default {
 mounted() {
  console.log("Who is this man: >> ", this.$store.state.author);
  console.log("How is he: >> ", this.$store.state.describe);
 },
};
</script>

Start the server, open the console and re-enter http://192.168.1.233:3000/#/weclome in the address bar
Saw the print information

Who is this man: >> Asiter
How is he:>> A boy with film

6. Summary

The initial project ends here, there are still many interesting things in vue3. Next time we will look at the use of VUE3's highlight Composition API. (I’ve been having a bit of a pain playing Genshin Impact lately)

This is the end of this article about how to use vite to build vue3 applications. For more relevant content about using vite to build vue3, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!