Vue3.0 installation tutorial for Vue3.0 series

This series will give you a first taste of Vue3.0 and its ecology

Series of articles:

  • Preliminary experience of Vue3 and its Ecological Series I (Build Vue3 Project)
  • Initial experience with Vue3 and Its Ecological Series 2 (Packaged Vuex)
  • Other series of developments…

preface

Node14.0.0. It is recommended to install NVM to manage node versions

VueCLI 3+ scaffolding is required to install VUE3

Run vue -v to view the current version. Run vue create project-name to create a VUe3 project

If prompted: upgrade to Vue CLI 3: Run the following command to upgrade the scaffolding after creating the project

npm uninstall -g vue-cli
npm install -g @vue/cli
Copy the code

Run vue create project-name again to see the following prompt

Choose Manual Configuration

Create a vue2 project for the default template. 2. Create a vue3 project for the default template. Manually set up the VUE projectCopy the code

Reveal the difference between the default vUE configuration and the manual configuration of the generated project folder.

Now that you know that manual Settings provide more optional modules (Eslint, Css preprocessors, Vuex, Router), this project uses manual configuration because they are more needed for production-oriented projects. Now use the up and down key to select the third one and press Enter to create it.

Select the module to configure

Next, press the space to select. The following is recommended

Choose 3. X

Then select as shown in the following figure

Type n with class component; Whether to use bable to process typescript input y; Install CSS and processors as you like; Install ESLint the way you're used to. I chose Prettier; Select esLint at save time; Configure Babel esLint to generate separate files select the first one; The last choice is noCopy the code

Press Enter to create the Vue3.0 project and the selected items will be configured by default.

Start the project

Enter the folder and start the project NPM Run serve

The project structure is shown below

At this point, the Vue3.0 project is complete and you can have a good time trying out vue3’s new syntax 😝. You can also continue learning with me at 👇🏻 below

At the end

  • Preliminary experience of Vue3 and its Ecological Series I (Build Vue3 Project)
  • Initial experience with Vue3 and Its Ecological Series 2 (Packaged Vuex)
  • Other series of developments…