Complete steps to quickly build a vue3.0 project

How to build a vue3.0 basic project?

1. We must ensure that the vue/cli version is above 4.5.0 to better support 3.0

//Install the latest vue/cli
yarn global add @vue/cli 
//or npm install -g @vue/cli

Use vue -V to check the installed version number and verify that it is successfully installed.

2. Create our first project through vue/cli3

vue create my-project

 ? Please pick a preset: (Use arrow keys)
 default (babel, eslint) // default option Manually select features // manually select features

Obviously, the above two options are the default options. In the first step, we choose the manual customization option.

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel // Code compilation( ) TypeScript // ts
( ) Progressive Web App (PWA) Support // Support progressive web applications ( ) Router // vue routing ( ) Vuex // state management mode ( ) CSS Pre-processors // css preprocessing ( ) Linter / Formatter // code style, format verification ( ) Unit Testing // unit testing ( ) E2E Testing // end-to-end testing

In this step, we select some configurations we need according to the needs of our project , a select all, space single selection, just press the space in the configuration item we need, and press Enter to confirm after selection.

Router

Whether the route uses history mode, choose according to project requirements

CSS Precompilation

In this step, I choose the node-sass preprocessing type and choose the css precompilation type according to your project requirements.

ESLint syntax checker

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only // Only report errorsESLint + Airbnb config // Non-rigorous modeESLint + Standard config // Normal modeESLint + Prettier // Strict modeTSLint (deprecated) // TypeScript format verification tool

This step can also be selected according to project requirements

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // ​​Detection when saving ( ) Lint and fix on commit // Detection when fixing and submitting

Select the verification mode. I chose to verify when saving. I also recommend that you choose to verify when saving. You can also modify some grammar prompts in time, which is more convenient for grammar adjustment.

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // Stored in dedicated config files In package.json // Stored in package.json

Select the storage location for custom configurations such as Babel, ESLint, etc. Here we recommend you choose the first

Whether to save the currently selected configuration item. If the current configuration is frequently used, it is recommended to select y to save the current configuration item.

Run the project

At this point our project has been built. According to the prompts, let's run the project.

cd may-project
yarn serve

Upgrading Vue

The project is already running, but we need to point out that if we use 3.0 syntax to develop directly, there will be a problem.

<template>
  <div class="home">
    {{msg}}
  </div>
</template>

<script>
import { toRefs, reactive } from 'vue'
export default {
  name: 'Home',
  setup: () => {
    const state = reactive({
      msg: 'Hello World'
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

If we directly render the msg page, we will always get an error saying that the msg variable is not initialized.

We are not in a hurry here. Let's take a look at package.json and check the version of vue to see why it does not support the 3.0 syntax. The problem is really here.

Sure enough, it is still version 2.xx, so let's upgrade the version

vue add vue-next

After the upgrade, we looked at package.json and found that it was already version 3.0.0-beta.1.

After upgrading, let's run our project in yarn serve

Sure enough, reality always slaps my face, and it still doesn't run. Let's take a look at min.js according to the error.

import {
  createApp
} from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

We made some minor adjustments and as expected our project was running normally! The msg string we defined is also rendered on the page.

So far we have run through our first vue3 project

3. Improvements and new features of vue3.0 compared to vue2.0

1. Compared with vue2.0, the performance has been significantly improved; (according to the author, there is a 30%-300% performance improvement)

2. Compared with vue2.0, the package size is significantly reduced; Tree-shaking support is used to clip useless modules and only package what is needed, which greatly reduces the package size;

3. Exposed custom rendering API and increased scalability;

4. The underlying layer is completely rewritten in typescript, which can support ts well;

5. New features: Added composition-api, which allows us to combine component logic in a less invasive and more flexible way;

Summarize

This is the end of this article about the quick construction of vue3.0 projects. For more relevant vue3.0 project quick construction content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!