Home > Article > Web Front-end > A must-have quick development guide for VUE3 beginners
VUE3 A must-have guide for rapid development for beginners
Vue is a popular JavaScript framework. Its ease of use, high degree of customization, and rapid development mode make it popular in front-end development. . The latest Vue3 introduces more powerful features, including performance optimization, TypeScript support, Composition API, better custom renderers, etc. This article will provide a quick development guide for Vue3 beginners to help you quickly get started with Vue3 development.
First of all, before starting Vue3 development, we need to install Vue3 first. You can install Vue3 in the project through the following command:
npm install vue@next
If you are using CDN to introduce Vue3, you need to use the following code:
<script src="https://unpkg.com/vue@next"></script>
After installing Vue3, we can start building the application. Vue3 provides Vue CLI tools to help us quickly create and configure Vue3 applications.
You can use the following command to install Vue CLI:
npm install -g @vue/cli
The command to create a new project is as follows:
vue create my-project
Vue3 uses a completely rewritten renderer, so you need to pay attention to some changes when using Vue3 components. The following is an example of a Vue3 component:
// HelloWorld.vue <template> <div> <h1>Hello world!</h1> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'HelloWorld', }); </script>
It is worth noting that you need to use defineComponent# in Vue3 ## function to define components instead of
Vue.extend in Vue2.
// HelloWorld.vue <template> <div> <h1>Hello world!</h1> <p>Current count is: {{ count }}</p> <button @click="incrementCount">Increment Count</button> </div> </template> <script> import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'HelloWorld', setup() { const count = ref(0); const incrementCount = () => { count.value++; }; return { count, incrementCount, }; }, }); </script>As you can see, in the Composition API, we can put the logic code in the
setup function, and then pass the variables and functions through
return statements are exposed to templates.
// router/index.js import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router;With the router in Vue2 In comparison, the way of using routers in Vue3 has changed slightly. You need to use the
createRouter and
createWebHistory functions to create a router.
// store/index.js import { createStore } from 'vuex'; export default createStore({ state() { return { count: 0, }; }, mutations: { increment(state) { state.count++; }, }, actions: { increment(context) { context.commit('increment'); }, }, getters: { count(state) { return state.count; }, }, });As you can see, in Vue3 , we need to use the
createStore function to create a new state management instance. At the same time, you need to use the
context parameter in
actions to call
mutations.
The above is the detailed content of A must-have quick development guide for VUE3 beginners. For more information, please follow other related articles on the PHP Chinese website!