win10使用npm安装、创建vue项目教程

短命女 2022-12-10 03:44 949阅读 0赞

### 1、在使用之前，先类掌握3个东西，明白它们是用来干什么的： ###

**npm:  nodejs 下的包管理器。**

**webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。**

**vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要npm install 就可以安装。**

### 2、nodejs下载网址：[https://nodejs.org/en/][https_nodejs.org_en]     【如果嫌下载的慢，可以下载其他网站上的，别人有现成的，下载的比较快】 ###

![2122db339ad4c282c01e0a4c9b842b84.png][]

###  3、下载好后，双击安装： ###

![787070181d4eb6354442b627b349d00a.png][]

###  4、默认，下一步： ###

![b40ce42d6a962b73376ade7d717ea3d0.png][]

###  5、接受协议： ###

![12461a83230969a4b8664295fa610716.png][]

###  6、选择安装路径： ###

![180628a64010aee2bc96647596a79d83.png][]

###  7、会默认自己添加环境变量： ###

![3ee3761f8088d44e72a9d8f6c46ae143.png][]

###  8、接下去一路“next”，最后点击finish ###

![48ab1caa2f04c9ac15eaf8ffb33b1b38.png][]

###  9、安装好后，对应的各个文件的作用： ###

![775ce05db690c99c6b8b213227b0cd89.png][]

###  10、cmd打开终端： ###

![b0ea3721f682845f92536af72810213e.png][]

###  11、检查是否正常 ###

![23a6f91b01a20c3626bff643920570ce.png][]

![afdbfef7b39d19c767eb66f5dbcf95db.png][]

###  12、再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过， ###

### 一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\\nodejs ###

![9dc6663392f9d03b969bff2175468600.png][]

### 先如下图建立2个目录： ###

![bea0426031debd0f385132b017526465.png][]

###  13、然后运行以下2条命令 ###

### npm config set prefix "D:\\nodejs\\node\_global" ###

### npm config set cache "D:\\nodejs\\node\_cache" ###

![c8e9d031ccdb2314e8adc3b0098bfad5.png][]

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

### 14、配置一个镜像站，为了提升速度， ###

### 输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站 ###

![2e6d19ebf5be093e10ebd45a436aa901.png][]

**输入命令npm config list 显示所有配置信息，我们关注一个配置文件**

**C:\\Users\\Administrator\\.npmrc**

![6fb55bc990e0eb811ce9303640921486.png][]

![ab8a6434f4515c16775435472a873221.png][]

### 使用文本编辑器编辑它，可以看到刚才的配置信息 ###

![ccc3a17aeb5823553d75e6081cd5c63c.png][]

![3df9daea6c48dade192158131df21074.png][]

**检查一下镜像站行不行命令1**

**npm config get registry**

![087562dead6f199f218f8032263d2067.png][]

![1277205d6cca776b88f7fb23ec113750.png][]

**检查一下镜像站行不行命令2**

**Npm info vue 看看能否获得vue的信息**

![224014342e122552603196676f5f8e4c.png][]

![580f43b3443c751115604db3b12a8c49.png][]

### 注意，此时，默认的模块D:\\nodejs\\node\_modules 目录 ###

### 将会改变为D:\\nodejs\\node\_global\\node\_modules 目录， ###

### 如果直接运行npm install等命令会报错的。 ###

### 我们需要做1件事情： ###

### 1、增加环境变量NODE\_PATH 内容是：D:\\nodejs\\node\_global\\node\_modules ###

![3f79255792c728601fd0fb7195684d33.png][]

### （注意，一下操作需要重新打开CMD让上面的环境变量生效） ###

### 一、测试NPM安装vue.js ###

### 命令：npm install vue -g ###

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

![5889d49f18335ce543450ebbf85fd8dd.png][]

![ffe5c8d602ad058d4dbfdad556a1c9ed.png][]

### 二、测试NPM安装vue-router ###

### 命令：npm install vue-router -g ###

![4024d8446e874a004be0151c8bca4bb8.png][]

![38b6522c3e39ad77733d8f3f3ee8c0ba.png][]

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

![2d23ea4ad2f33b3d571c3b1a7b28e11d.png][]

![3e88d7433a401baf57c2498ced109591.png][]

### 编辑环境编辑path ###

![0f5351a8141de34b61fa5e1f4d4863dd.png][]

### 对path环境变量添加D:\\nodejs\\node\_global ###

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

![48d5e84d132ba017e2dbf5915c62ca05.png][]

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

![3c91448efcf967bc63f972324c26ecf9.png][]

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

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

![f11c8646992878549289624c0ccd0330.png][]

### 初始化，安装依赖 ###

![7de5fa3a2449afcad87128c61c107301.png][]

### 运行npm install安装依赖 ###

![e3dfc9979ed19fba2a568a46fa373474.png][]

![cabc86eb7771b4b01e659fa8885d4148.png][]

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

![f2d3b88e533e6f346f01c7c291a8b405.png][]

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

### npm run build ###

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

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

![0afcef4fe0a45f12be2651652dbd3949.png][]

[https_nodejs.org_en]: https://nodejs.org/en/
[2122db339ad4c282c01e0a4c9b842b84.png]: /images/20221123/13c57dccf40f4865906a3eba44799e77.png
[787070181d4eb6354442b627b349d00a.png]: /images/20221123/603f1f0bcd164b108dc3b39e854456e3.png
[b40ce42d6a962b73376ade7d717ea3d0.png]: /images/20221123/b8f787ad31db4f50b4505f3941707c04.png
[12461a83230969a4b8664295fa610716.png]: /images/20221123/36cf4a74cb5749c8b8155c0a2978e354.png
[180628a64010aee2bc96647596a79d83.png]: /images/20221123/163be1cc5ebc4c7f9bcd570009a874f3.png
[3ee3761f8088d44e72a9d8f6c46ae143.png]: /images/20221123/dee590ad106a49f388d4916573183d24.png
[48ab1caa2f04c9ac15eaf8ffb33b1b38.png]: /images/20221123/806371156309423e889b09181f5c7877.png
[775ce05db690c99c6b8b213227b0cd89.png]: /images/20221123/fb62446ed0a34b34bf3be9c8ef43460f.png
[b0ea3721f682845f92536af72810213e.png]: /images/20221123/7f38f05563594f0fbd9276eb22bb7620.png
[23a6f91b01a20c3626bff643920570ce.png]: /images/20221123/34a9a12b41524cbe80a7581141a1cbf2.png
[afdbfef7b39d19c767eb66f5dbcf95db.png]: /images/20221123/7673cca7f0cc4cf0a5b939b26233994b.png
[9dc6663392f9d03b969bff2175468600.png]: /images/20221123/bfa4adbc4fde44d69628720d4a0e4c23.png
[bea0426031debd0f385132b017526465.png]: /images/20221123/2fb8478dc5d345c9b9024f66fd747430.png
[c8e9d031ccdb2314e8adc3b0098bfad5.png]: /images/20221123/d97f7997a1be4306852af19c9353f4f9.png
[2e6d19ebf5be093e10ebd45a436aa901.png]: /images/20221123/4bf0a94f5a74425386739f98f3f6b479.png
[6fb55bc990e0eb811ce9303640921486.png]: /images/20221123/4ebcc473355244daae98997dd741883b.png
[ab8a6434f4515c16775435472a873221.png]: /images/20221123/196f1e1b84a24782ba58d3ac2facc9c5.png
[ccc3a17aeb5823553d75e6081cd5c63c.png]: /images/20221123/4a386c100ac94fe38ba11c1e5afd4cc1.png
[3df9daea6c48dade192158131df21074.png]: /images/20221123/201ca350f4ad4713b804d1409da7da05.png
[087562dead6f199f218f8032263d2067.png]: /images/20221123/d253dc4ac09a41848d89954d5aa1f940.png
[1277205d6cca776b88f7fb23ec113750.png]: /images/20221123/3f5f312e83ab45f6b43c8b748f312c0f.png
[224014342e122552603196676f5f8e4c.png]: /images/20221123/57781e58eb7f4c489690171a6e9d5bfa.png
[580f43b3443c751115604db3b12a8c49.png]: /images/20221123/b572f15f57cf48fba8cfc950a9077d69.png
[3f79255792c728601fd0fb7195684d33.png]: /images/20221123/e28124d39ed64324b9768f4ae9ac436d.png
[5889d49f18335ce543450ebbf85fd8dd.png]: /images/20221123/3856ba5d698d479281b6f951a8d72e14.png
[ffe5c8d602ad058d4dbfdad556a1c9ed.png]: /images/20221123/00ac46894c5e4476bba1a71cf4c6c12e.png
[4024d8446e874a004be0151c8bca4bb8.png]: /images/20221123/e5fa0c8b712343e9b92ee23338f84ed1.png
[38b6522c3e39ad77733d8f3f3ee8c0ba.png]: /images/20221123/a0d0eb84b0044766965c035316e158f9.png
[2d23ea4ad2f33b3d571c3b1a7b28e11d.png]: /images/20221123/b3322938a55645d8bd50cb1cfd6b298e.png
[3e88d7433a401baf57c2498ced109591.png]: /images/20221123/f4d6ab338ef8402583d00e2dcf73b13d.png
[0f5351a8141de34b61fa5e1f4d4863dd.png]: /images/20221123/50e124012b2d44e4bfefc5d8d97c9d37.png
[48d5e84d132ba017e2dbf5915c62ca05.png]: /images/20221123/242ce3638a624c129a22fe5eea1f3154.png
[3c91448efcf967bc63f972324c26ecf9.png]: /images/20221123/8e14d3b70083493f97412eadb6c7511f.png
[f11c8646992878549289624c0ccd0330.png]: /images/20221123/b3d68cb2016741828b1b580fe673165e.png
[7de5fa3a2449afcad87128c61c107301.png]: /images/20221123/42b304bac4dd4ce5b73f728479523653.png
[e3dfc9979ed19fba2a568a46fa373474.png]: /images/20221123/93287f1e09594bd5b13cdedfbef3cbbd.png
[cabc86eb7771b4b01e659fa8885d4148.png]: /images/20221123/bc832f38612b4da3b958b1a35a4ae463.png
[f2d3b88e533e6f346f01c7c291a8b405.png]: /images/20221123/1991de7862aa4a09ab1010a21cd20b90.png
[0afcef4fe0a45f12be2651652dbd3949.png]: /images/20221123/a85f4aaf138c4538b63ddb222436c00e.png