First, install the node environment, download and install node -v from the official website to see the version, without going into details, open the cmd command in the folder, npm install @vue/cli -g install vue-cli3,
If it is reported that npm installs vue timeout (ERR! errno ETIMEDOUT), it can be solved by using cnpm mirror: npm install -g cnpm --registry=https://registry.npm.taobao.org
This is not enough. At this time, you need to use another command, so that the default download is obtained from cnpm.
npm --registry https://registry.npm.taobao.org info underscore Then execute the command: npm install vue-cli -g
Create a project after installation: vue init webpack demo
Then choose whether to install the plug-in according to the prompts, if you install it, select Yes, if you don't install it, select No, until the plug-in is completed, refer to the figure:
Install vue-router? Choose Y (the official recommended routing plug-in, which is used in almost every project)
User ESLint to lint your code? Select Y (whether to enable eslint detection rules, if it is not a large-scale project of the company or a multi-person co-developed blogger, it feels unnecessary to install)
Set up unit tests? Asked whether to test select n
Setup e2e tests with Nightwatch? Select n (Set up E2E tests with Nightwatch?)
Should we run `npm install` for you after the project has been created? (recomm ended) (Use arrow keys) Choose to use npm or yarn installation, usually just press Enter
At this time, there is your directory under the directory you created. In reality, loading dependencies through npm is quite time-consuming.
The command for downloading and installing Taobao's cnpm is
npm install -g cnpm --registry=https://registry.npm.taobao.orgBut this is not enough, so it can be used through cnpm i live-server -g only when downloading resources actively,
In today’s use of create-react-app, when using react official scaffolding to create a react project, there will be network errors. The reason is that create-react-app will use npm to download resources when creating a new react project. , But because of the "network" problem, the resource cannot be downloaded
At this time, you need to use another command, so that the default download is obtained from cnpm.
npm --registry https://registry.npm.taobao.org info underscore
After solving the problem of converting npm to cnpm, cd your directory name and enter npm run dev to start the application. If it starts successfully, it will automatically open a vue page
So far you have learned how to install the vue-cli scaffolding tool. Below I will briefly explain what the various directories are:
Introduction of main.js
el is the mount point, router is the route
App.vue is the entrance of the entire file, there are three parts, template template script logic style style