1, install
Tip: There is currently no official translation document for VUE3.0. But someone has translated it. I received the likes of You Yuxi, here is the URL/
1. Install cli
Because to use vue3, the cli version must be higher, and it must be higher than 4.
So if you don't have cli installed, just install the latest version directly. You can upgrade or uninstall it and reinstall it
It is better to install globally
//Global installationnpm install -g @vue/cli # OR yarn global add @vue/cli //Global uninstallnpm uninstall -g vue-cli # OR yarn global remove vue-cli //Upgrade clinpm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli //View the native cli versionvue --version
2. Create a project
Since we all use VUE3, you might as well try the latest vite build tools.
Maybe it can open the door to a new world for you
//New projectnpm init vite-app asiterVue3 //Enter the directorycd asiterVue3 //Installation dependenciesnpm install //runnpm run dev
3. View the project
VUE3.0 is much simpler than VUE2.0
And the changes are also very obvious
VUE3.0
import { createApp } from "vue";
import App from "./";
import "./";
createApp(App).mount("#app");
VUE2.0
import Vue from "vue";
import App from "./App";
= false;
new Vue({
el: "#app",
components: { App },
template: "<App/>",
});
Secondly, when we look at it, the most obvious thing is that there is not only one root node in the template node.
//This is where Vetur plugin will report an error, but it will not affect the use<template>
<img alt="Vue logo" src="./assets/" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<script>
import HelloWorld from './components/'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
4. Add route Vue-Router
Since we are using VUE3.0, our VUE-ROUTER must also be the corresponding version.
npm install vue-router@next -S
appendix:
npm install vue-router Will download the 3.0 version
So we need npm install vue-router@next -S Carry out installation
Attached here the github address/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 take a look at the official example
I can't use it, I can't do it directly with CV
appendix:
Official example address
/s/vue-router-4-reproduction-hb9lh?file=/
I only paste the main part of the space issue
<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({})
(router)
= ('#app')
</script>
These are the official examples, and we found that the creation of routes is a bit different.
In vue2.0, mode is used to control the parameters of routing mode
But in vue3, createRouter
history attribute to control the routing mode parameters
As the name implies
The createWebHistory method returns the History pattern
The createWebHashHistory method returns a Hash mode
So we try to add it
First create a new router folder in the src directory, and then add a file under the folder
Add the following content in the file
import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({
history: createWebHashHistory(),
routes: [
{
path: "/weclome",
component: () => import("../views/"),
},
],
});
At the same time, create a new view folder under src and add a file
Add the following code because it is a first meeting. I won't try other APIs anymore, I'll run the effect first
<template> <div>helloWord!weclome to Vue3.</div> </template>
Then change ours
<template>
<router-view></router-view>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
Finally, let’s modify our most important file configuration router
import { createApp } from "vue";
import App from "./";
import "./";
import router from "./route";
createApp(App)
.use(router)
.mount("#app");
Start the project, enter http://192.168.1.233:3000/#/weclome in the address bar
I found out what we wanted
5. Add state management Vuex
Because we are using VUE3.0, we also need to support the versions of Vuex.
As of today, it has been updated to 4.0.0-beta.4
appendix:
Attach the github address/vuejs/vuex/releases
npm i vuex@next -S
Then look at the official case/vuejs/vuex/tree/v4.0.0-beta.4
import { createStore } from "vuex";
export const store = createStore({
state() {
return {
count: 1,
};
},
});
Like router, compared with VUE2, the writing method has also been changed. First, create an instance from vuex using createStore.
Then we also write one
Create a new store directory under the src directory and add a file. Write the following content
import { createStore } from "vuex";
export const store = createStore({
state() {
return {
author: "Asiter",
describe: "A teenager with film",
};
},
});
Go back to ours and modify it. Add vuex
import { createApp } from "vue";
import App from "./";
import "./";
import router from "./route";
import { store } from "./store";
createApp(App)
.use(router)
.use(store)
.mount("#app");
Go back to the file under our views at the beginning
Renovate it
<template>
<div>helloWord!weclome to Vue3.</div>
</template>
<script>
export default {
mounted() {
("Who is this man:>> ", this.$);
("How is he:>> ", this.$);
},
};
</script>
Start the server
Open the console
Re-enter the address barhttp://192.168.1.233:3000/#/weclome
I saw the print message
Who is this man:>>Asiter
How is he:>> A teenager with film
6. Summary
This is the beginning of the project, and there are still many interesting places in vue3. Next time we will take a look at the use of the Composition API, the highlight of VUE3. (The liver pain caused by Genshin Impact recently)
This is the end of this article about the implementation method of using vite to build vue3 applications. For more related content on vite to build vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!