Deploy VUE project nanny level tutorial through VUE-CLI scaffolding
npm——installation tutorial, installation of vue scaffolding
npm: It is a package management tool installed with NodeJS, which can solve many problems in NodeJS code deployment. For example, the commonly used ones are:
1) Allow users to download third-party packages written by others from the NPM server for local use.
2) Allow users to download and install command-line programs written by others from the NPM server for local use.
3) Allow users to upload their own packages or command-line programs to the NPM server for others to use.
First of all: first download nodejs from nodejs.org
as shown in the figure, download 8.9.3LTS (recommended for most users)
and double-click to install . You can always use the default path for
Next . In this example, modify it to d:\nodejs and click Install to install . Finished Check whether there are the following files in the directory Open the control command line program (CMD), check whether it is normal, and then look at the other two directories, npm's local warehouse is running in the user directory of the system disk c disk (npm-cache is not seen Because it has not been used, it is generated as soon as the cache directory is used), we try to move these two directories back to D:\nodejs first create two directories as shown in the figure below and then run the following two commands npm config set prefix “D:\ nodejs\node_global” npm config set cache “D:\nodejs\node_cache” as shown above, let’s pay attention to the npm local warehouse again, enter the command npm list -global and enter the command npm config set registry=http://registry.npm.taobao .org Configure the mirror station Enter the command npm config list to display all configuration information. We focus on a configuration file C:\Users\Administrator.npmrc and edit it with a text editor, and you can see the configuration information just now. Check whether the mirror station works. Command 1 npm config get registry
Check if the mirror station works. Command 2
Npm info vue to see if you can get vue information
. Note that at this time, the default module D:\nodejs\node_modules directory
will be changed to D:\nodejs\node_global\node_modules directory.
If you run commands such as npm install directly, an error will be reported.
We need to do 1 thing:
1. Increase the environment variable NODE_PATH content: D:\nodejs\node_global\node_modules
1. Test NPM installation vue.js
Command: npm install vue -g
where -g means to install to the global global directory
2. Test NPM installation vue-router
Command: npm install vue-router -g
3. Install vue scaffolding
run npm install vue-cli -g
Edit environment, edit path
Add D:\nodejs\node_global
version below win10 to the path environment variable, and display PATH horizontally. Note that when adding to the end, there should be no semicolon【;】
Re-open CMD, and test whether vue is working normally
. Note that the vue-cli tool has built-in templates including webpack and webpack-simple. The former is a more complicated and professional project, and its configuration is not all placed in the webpack.config in the root directory. js.
Initialize, install dependencies
npm run dev (run dev)
Automatically open the browser http://localhost:8080/#/
