Of Stack

Implementation method of building vue3 application with vite

  • 2021-10-27 06:30:01
  • OfStack

1. Installation

Tip: There is no official translation document for VUE 3.0 at present. But someone has already translated it. It was praised by You Yuxi. The website https://v3.cn.vuejs.org/ is attached here

1. Install cli

Because to use vue3, you must require a higher version of cli, which must be higher than 4.5. X
Therefore, the latest version of cli can be installed directly, and the existing ones can be upgraded or reinstalled after uninstallation
It is best to install globally 


// Global installation 
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// Global unload 
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
// View this machine cli Version 
vue --version

2. Create a project

Now that we're all using VUE3, try the latest vite build tool.
Maybe it can open the door to a new world for you 


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev

STEP 3 View projects

VUE 3.0 is much simpler than VUE 2.0
And the change of main. js is also very obvious

VUE3.0 


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

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

VUE2.0 


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

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

Secondly, we focus on App. vue. The most obvious thing is that there is not only one root node in template node. 


// This is the place   Although Vetur The plug-in will report an error   But 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 routes Vue-Router

Since we are using VUE 3.0, we want VUE-ROUTER to correspond to version 4. X. 


npm install vue-router@next -S

Annex:

npm install vue-router Will go down to version 3.0
So we need to npm install vue-router@next -S Carry out installation
Enclosed is the address of github://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 can't use it after installation? Let's look at the official example first
I won't use it. I can't use CV 1 wave directly

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

I only paste the main part of the space problem 


<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 vue 2.0, mode is used to control the parameters of routing mode
However, in vue3, the routing instance is created through createRouter
The history attribute is used as a parameter to control the routing mode

As the name implies
The createWebHistory method returns the History schema
The createWebHashHistory method returns the Hash schema

So we tried to add it
First create a new router folder under the src directory, and then add an index. js file under the folder
Add the following 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 new folder of views and add a file of HelloWorld. vue under src
Add the following code, because it is first seen. I won't try other API, but run an effect first 


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

Then modify our App. vue 


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

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

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


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev
0

To start the project, enter http://192.168. 1.233: 3000/#/weclome in the address bar
Found that we got what we wanted

5. Add state management Vuex

Also, since we are using VUE 3.0, we have to correspond to the supported version of Vuex
As of today. has been updated to 4.0. 0-beta.4

Annex:
Attached is github address https://github.com/vuejs/vuex/releases 


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev
1

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


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev
2

And router 1, compared with VUE2, it is also a change of writing. First, create an instance from vuex with createStore
Then we also wrote one according to it

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


import { createStore } from "vuex";

export const store = createStore({
 state() {
  return {
   author: "Asiter",
   describe: "1 A teenager with a film ",
  };
 },
});

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


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev
4

Go back to 1 and start the file HelloWorld. vue under our views
Transformation 1 


// New project 
npm init vite-app asiterVue3
// Enter the directory 
cd asiterVue3
// Install dependencies 
npm install
// Run 
npm run dev
5

Start the server
Open the console
Re-enter http://192.168.1.233: 3000/#/weclome in the address bar
See the printed information

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

6. Summary

This is the beginning of the project, and vue3 still has many interesting places. Next time we'll look at the use of Composition API, the highlight of VUE3. (Recently, the liver played by the original God has a little pain)

Related articles: