1. Install node.js
1. The environment of this example
node.js: v16.14.0
npm：8.3.1
vue: @vue/cli 5.0.1
2. Node.js environment installation and testing
Since the installation and creation of vue depends on npm (package management and distribution tool) in node.js (JavaScript runtime environment), you need to ensure that node.js is installed first.
Download URL: Node.js (nodejs.org)
After the download is complete, check to see if the installation is successful.
Detection method: Open the cmd command window (Window + R, enter cmd and press Enter), enter node -v and press Enter, and the normal display of the node.js version means that it has been installed. As shown in FIG.
Npm will be installed along with node.js, so as long as node.js is installed normally, it means that npm has been installed. Detection method: Enter npm -v in the cmd command window and press Enter, and the npm version can be displayed normally.
2. Install vue scaffolding: Vue CLI
Download link: Home | Vue CLI (vuejs.org)
The official documentation states that the installation command is "npm install -g @vue/cli". However, the download speed of native npm is really not flattering, so we use the Taobao mirror to install.
Command: npm install -g @vue/cli --registry=https://registry.npm.taobao.org After the installation is complete, enter vue -V (uppercase V) in the cmd command window and press Enter to display @vue/ normally The cli version indicates that the installation was successful.
3. Create a vue project
First of all, we plan to create a project in the root directory of the D drive. In the command window, enter d: and press Enter, and then enter vue create myvue and press Enter to create the myvue folder, as shown in the following figure
Default (bable, eslint) // default
Manually select features // Choose to create items manually (here, we choose to create manually, use the up and down arrows to select)
(*) Babel // supports high-order syntax transformations
( ) TypeScript // support writing source code using TypeScript
( ) Progressive Web App (PWA) Support // Support PWA
(*) Router // route
(*) Vuex // store
( ) CSS Pre-processors // CSS preprocessors
( ) Linter / Formatter // code style checking and formatting
( ) Unit Testing // support unit testing
( ) E2E Testing // support E2E testing
After the carriage return, use the space bar and the up and down arrow keys to be consistent with the selection in the figure, and then press the carriage return
Select 3.x, press Enter
After pressing Enter, select No again, and click Enter again. At this time, the dependency package is being downloaded and the project is created.
After the download is complete, the following figure will appear
Input: cd myvue and press Enter to enter the myvue project
Input: npm run serve press Enter to start the service
Enter http://localhost:8080/ in the browser address bar, and open the webpage normally, indicating that the project is successfully created, as shown in the figure below
