Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to build a vue3.0 project", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to build a vue3.0 project" this article.

First, we need to make sure that the vue/cli version is above 4.5.0 in order to better support 3.0 vue/cliyarn global add / install the latest vue/cliyarn global add @ vue/cli / / or npm install-g @ vue/cli

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

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 / / Manual selection function

Obviously, the above two options are the default options for Default. 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 to select, to toggle all To invert selection) > () Babel / / Code compilation () TypeScript / / ts () Progressive Web App (PWA) Support / / supports progressive web application () Router / / vue routing () Vuex / / State management mode () CSS Pre-processors / / css preprocessing () Linter / Formatter / / code style, Format check () Unit Testing / / Unit Test () E2E Testing / / end-to-end Test

In this step, we choose some of the configurations we need according to the needs of our project. A, select all, select the blanks, hit the space in the configuration items we need, and enter to confirm after the selection.

Router

Whether the route uses history mode or not, according to the project requirements.

CSS precompilation

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

ESLint syntax check

? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only / / error alert ESLint + Airbnb config / / loose mode ESLint + Standard config / / normal mode ESLint + Prettier / / strict mode TSLint (deprecated) / / TypeScript format verification tool

This step can also be chosen according to the needs of the project.

? Pick additional lint features: (Press to select, to toggle all, to invert selection) > (*) Lint on save / / detect on save () Lint and fix on commit / / repair and detection on submission

Choose the check mode. I choose to do the check when I save. I also recommend that you choose to do the check when you save. You can also modify some grammar hints in time, which is more convenient to make grammar adjustments.

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

Select the storage location of custom configurations such as Babel and ESLint. Here, I suggest you choose the first one.

Whether to save the currently selected configuration item, and if the current configuration is a frequently used configuration, it is recommended that you select y to store the current configuration item.

Run the project

At this point, our project has been set up. According to the tips, let's run the project.

Cd may-projectyarn serve

Upgrade vue

The project is already running, and here we are going to hit the blackboard. If we develop it directly with 3.0 syntax now, there will be a problem.

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

If we render the msg page directly, it will keep telling us that the msg variable is not initialized.

We are not in a hurry here. Let's take a look at package.json and the version of vue. Why does it not support 3.0syntax? as a result, the problem is really here.

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

Vue add vue-next

After the upgrade, we took a look at package.json, and sure enough, it was already the 3.0.0-beta.1 version.

Upgrade is good, now we are running our project in yarn serve

Sure enough, the reality always slapped me in the face, but still didn't run. Let's take a look at min.js according to the error report.

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 adjustments, and as expected, our project has been running normally! The msg string we defined is also rendered to the page.

At this point, we passed our first vue3 project.

III. Improvements and new features of vue3.0 compared with vue2.0

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

two。 Compared with vue2.0, the volume of packaging is significantly reduced; using Tree-shaking support to edit useless modules, only what is needed for packaging, greatly reduces the volume of packaging.

3. Exposure of custom rendering api, increased scalability

4. The bottom layer is completely rewritten by typescript, which can support ts very well.

5. New feature: the addition of combinatorial api (composition-api) allows us to combine component logic with a less intrusive and more flexible approach

These are all the contents of the article "how to build a vue3.0 Project". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.