preface

To use Vue3 here, you need to upgrade vue to 4.5.0 or higher

My version, as follows

C:\HiSen\myWorkDemo\vue3>vue -V
@vue/cli 4.511.

C:\HiSen\myWorkDemo\vue3>node -v
v1417.6.

C:\HiSen\myWorkDemo\vue3>
Copy the code

Today I share two ways to create projects: Webpack or Vite

Create the project Webpack

vue create vue3_test

Select the second one, Default (Vue 3 Preview) ([Vue 3] Babel, esLint) and press Enter

Here I’m using NPM, you can choose your package tool, press Enter to install the dependencies

This will then take you to the project directory and start the project

  • $ cd vue3_test
  • $ npm run serve

Keep going. This is what happens when you start

Let’s have a look at the effect after startup. It feels no different from vue2 startup

Create project Vite

NPM init vite-app vue3_test_vite do not use CNPM here, I do, and as a result create a project called init

Then follow the prompted command, enter the project directory, initialization

NPM install short for NPM I

Final start-up project

npm run dev

Take a look at the vite creation project

It’s a little different, it’s cleaner, it’s more intuitive, it tells you that Vite created the VUE3 project

Project directory structure

After that, let’s have a look at the engineering structure of VUE3. Is there any difference

The whole structure looks a little bit cleaner, and what’s more important is that the core entry file main.js has changed a little bit. It used to be a new Vue instance, and then it was mounted by $mount, but now it directly encapsulates the new process internally. The factory function createApp is exposed so you can call it and mount it.

Well, the initial project actually does not need us to explore too much, the later article is the key to our exploration, I will step by step practice vuE3 knowledge points

A little encouragement, great growth, welcome to like collection