npm installation tutorial (vue.js)

https://www.cnblogs.com/goldlong/p/8027997.html

First clarify the relationship between nodejs and npm:

Node.js is a running environment of javascript, which is the encapsulation of Google V8 engine. Is a server-side javascript interpreter.

Inclusion relationship, nodejs contains npm, for example, if you have installed nodejs, you open cmd and enter npm -v, you will find the version number of npm on the line, indicating that npm has been installed.

Quoting the summary of the Great God:

In fact, npm is the package manager of nodejs. When we develop on Node.js, we will use a lot of javascript code that others have written. If we need to search for other people's code by name, download the source code, unzip it, and use it again, it will be very troublesome. So there is the package manager npm. Everyone uploads the source code written by themselves to the npm official website. If you want to use one or some of them, you can install it directly through npm, regardless of where the source code is. And if we want to use module A, and module A depends on module B, and module B depends on modules C and D, npm will download and manage all dependent packages according to the dependencies. Just imagine how troublesome it would be if we did all this work on our own!

node -v  to view the node version, and the built-in npm package manager is included to install dependent packages.

npm install -g typescript



1. Before using it, let's first grasp what the three things are used for.

npm: Package manager for Nodejs.

webpack: Its main purpose is to prepare all the static resources that need to be published on the browser side through CommonJS syntax, such as merging and packaging resources.

vue-cli: User-generated Vue project template. (To help you quickly start a Vue project, that is, to give you a set of Vue structure, including basic dependency libraries, you can install it with npm install)


Start:

 

As shown in the figure, download 8.9.3 LTS (recommended for most users)

Double click to install

 

You can use the default path, which is modified to d:\nodejs in this example

Point all the way Next

 

Click Finish to complete

Open CMD and check if it is normal

 

Let's take a look at the other two directories. The local repository of npm runs in the user directory of the system disk c drive (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 put these two Move the directory back to D:\nodejs

First create 2 directories as shown below

 

Then run the following 2 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 local repository of npm again and enter the command npm list -global

Enter the command npm config set registry=http://registry.npm.taobao.org to configure the mirror site

Enter the command npm config list to display all configuration information, we focus on a configuration file

C:\Users\Administrator\.npmrc

Edit it with a text editor and you can see the configuration information just now

Check if the mirror station works or not Command 1

npm config get registry

Check if the mirror station is OK 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 change 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 is: D:\nodejs\node_global\node_modules

 

 

 

(Note that the following operations need to reopen CMD for the above environment variables to take effect)

一、测试NPM安装vue.js

命令:npm install vue -g

这里的-g是指安装到global全局目录去

 

二、测试NPM安装vue-router

命令:npm install vue-router -g

 

 

运行npm install vue-cli -g安装vue脚手架

 

 

 

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global

win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】

 

重新打开CMD,并且测试vue是否使用正常

注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,

他的配置并不全放在根目录下的 webpack.config.js 中。

 

初始化,安装依赖

运行npm install安装依赖

npm run dev

成功界面,提示打开地址http://localhost:8080

 

自动打开浏览器http://localhost:8080/#/

npm run build

生成静态文件,打开dist文件夹下新生成的index.html文件

 

 

nmp下新建出来的vue01的目录描述:

 

分类:  vue.js

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325406886&siteId=291194637