Preface:

Vue website: v3.cn.vuejs.org

Vue cli:cli.vuejs.org/zh/guide/in…

Since vue2. X is globally installed in the local environment, and there are many projects that are VUe2. X, we want to be compatible with vue2.

Install VUe3 on top of global VUe2

1. Vue2 has been installed globallynpm install vue-cli -g

2. Install VUe3 based on VUe2

Vue2 has been installed globally, so vue3 cannot be installed globally, find E disk (any drive you like can be), create folder vue3, install in vue3 folder, execute command: NPM instl@vue /cli [remember: do not install globally]

NPM instll XXX installation is slow, encountered a bug:

Solution:

  • (1) Clear the cache
npm cache clean --force
Copy the code
  • (2) Perform the installation again
npm install @vue/cli  
Copy the code

3. Vue3 is added to the system environment variables

(1) You need to change the name of vue3 because the global vue command has been occupied by vue2.

(2) Create system variables, corresponding input variable names and file directories; This is the directory where we installed vue, and just go to the.bin folder.

Modifying the Path variable

Finally, just reboot your computer!

Note: After modifying environment variables, restart the computer to take effect. Reopen a new window for CMD

(3) Now enter CMD or cmder in the following figure, it means that the coexistence configuration of VUe2 and VUe3 has been installed successfully!

(4) Use vue3 to create a project, enter CMD:vue3 create vue3-demo

Note:

  • (1) Vue3-demo is the project name, and can not have capital letters, vue3Demo is wrong! The creation failed!

  • (2) Vue CLI 3 requires nodeJs ≥ 8.9 (officially recommended 8.11.0+, you can use NVM or NVM-Windows to manage multiple Node versions on the same computer)

Tips:

  • As long as the port of localhost in the development environment is inconsistent, open two CMD terminals to run the project at the same time, the project of vue2.x and vue3.x can be developed at the same time, without affecting each other.

  • Vue2. X is installed globally, creating new projects just as you created them before, without bridging.

Install vue CLI3 globally and continue to use VUE-CLI2.x

Preface:

If we do not want vue2 and VUe3 to coexist, and then want to be compatible with both scaffolds, then we adopt global installation Vue CLI3 and continue to use vuE-CLI2.x solution

Detailed steps:

1. The previous vuE-CLI (1.x or 2.x) has been installed globally. You need to uninstall it first

npm uninstall vue-cli -g
Copy the code

2, Install vue CLI3 (@vue/cli), pay attention to node version requirements before installation [Vue CLI 4.x requires Node.js v8.9 or later (V10 or later is recommended).】

npm install -g @vue/cli
Copy the code

3. Check whether the installation is successful and view the version

C:\Users\admin>vue -V
@vue/cli 4.513.
Copy the code

4. Vue CLI3 creates the project and runs it

vue create hello-world // Create the project
npm run serve / / run ok
Copy the code

What’s the difference between these two? The directory structure is the same.

Tips:

Vue cli3 is compatible with VUE-CLI2. The old project of VUE cli2 can still run.

5, the current global environment is the world of VUE CLI3, if you still want to create a vuE-CLI2 built project, how to operate?

Vue CLI >= 3 uses the same Vue command as the older version, so Vue CLI 2 (VUe-CLI) is overwritten. If you still need to use older versions of vue Init, you can install a bridge tool globally:

npm install -g @vue/cli-init
# `vue init`The operation effect will follow`[email protected]`Same vue init webpack my-project// vue2.x creates the project perfectly
npm run dev / / run ok
Copy the code

It is now perfectly compatible with vue2. X and vue3.

Vue3. X creation project details, please go back to……