vue学习一（环境配置）

win10下安装node和npm

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动非阻塞式I/O模型。

npm（Node Package Manager）是一个包管理和分发工具，运行在node环境下。npm已经内置在Node.js中，所以直接安装Node.js就可以了。
最新版本：https://nodejs.org/en/download/
历史版本：https://nodejs.org/dist/
按照正常安装流程安装，Add To PATH最好勾选，不然安装之后还要手动添加path。
查看命令：

检测并运行：

创建两个文件node-cache,node-global用来指定npm的模块路径和缓存路径(类似于java的maven库)

设置环境变量：

用户变量设置：将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global，没有PATH，可以直接添加。

系统变量设置：添加变量 NODE_PATH 值为：D:\Program Files\nodejs\node_modules

打开cmd,配置刚才新建的两个文件夹：
(因为默认会将模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间，所以下面两行的命令是修改模块保存的路径，自已想放哪都行，这里我就懒得放其它盘了)
npm config set prefix “D:\Program Files (x86)\nodejs\node-v12.10.0-win-x64\node-global”

npm config set cache “D:\Program Files (x86)\nodejs\node-v12.10.0-win-x64\node-cache”

可以执行命令查看这两个位置：
npm config get prefix
npm config get cache

现在我们来装个模块试试，选择express这个比较常用的模块。同样在cmd命令行里面，输入“npm install express -g”（“-g”这个参数意思是装到global目录下 ）。待cmd里面的安装过程滚动完成后，会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图

如果出现

说明权限问题，跳到②中的注意，用管理员去运行"cmd"。

后，查看node_global 文件夹

然后我们来配置npm的环境变量和nodejs的环境变量。在计算机图标上点右键，选属性，然后点击高级系统配置，弹出来的新窗口右下角有个环境路径，点击去，就能看到环境路径的配置界面，我们点击新建。然后在弹出来的窗口里，(注意：该处是新建用户变量，而不是系统变量) 变量名填：NODE_PATH

变量值填：D:\Program Files\nodejs\node_modules\

填写好后点确定，然后就能看到我们配置好的NPM环境路径。

此时还需要修改一些nodejs默认的模块调用路径，因为模块的安装位置变了，如果nodejs的命令还到原来的位置去找，肯定是找不到安装的模块了。我们在环境变量窗口，选择Path，然后点击右下角的编辑，然后选择npm那个。点击右边的编辑，将其修改为：D:\Program Files\nodejs\node_global\

然后点确定，保存这个配置。

改为：

这个时候所有的配置工作才算完成了，然后打开一个新的cmd窗口。先输入命令：
node
进入nodejs的交互式命令控制台，然后输入：
require(‘cluster’)
如果能正常输出cluster模块的信息，说明上面的所有配置就算生效了。

二、安装淘宝npm（cnpm）

我们还需要做的最后一个工作是，将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，只需要一个命令即可，命令是：
npm --registry https://registry.npm.taobao.org install cluster
上面的命令是临时使用国内一家npm源的地址来安装cluster模块。从下面图中可以看到，速度非常快。只用了不到0.8秒。而我们上面第一次安装的时候用了差不多3秒多，速度快了3倍多。

如果想一直使用这个源的地址，那么可以使用下面这个命令来配置。

npm install -g cnpm --registry=registry_url

registry_url指的是国内提供的一些npm仓库地址，常用的有：

https://registry.npm.taobao.org

http://r.cnpmjs.org/

查看cnpm是否真安装成功 cnpm -v

这两个都可以使用。如下面第二张图所示，配置好国内源后，安装一个较大的模块express，只用了不到6秒多一点，速度提升还是非常可观的。至此，nodejs和npm在windows上的配置就全部完毕。

//一下为参考资料：
设置淘宝为国内镜像源(相当于maven设置阿里是国内的远程镜像仓库)

打开cmd输入

npm config set registry https://registry.npm.taobao.org

设置完了输入

npm config get registry查看设置的国内镜像对不对

查看安装的node和npm

cmd下输入 node --version

cmd下输入 npm --version

## 安装webpack
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
Vue的组件是.vue或.wxml等文件，无法被浏览器解析，需要被翻译和打包为.js文件
1.输入cnpm install webpack –g安装 。
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到webpack文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd两个文件。


再安装vue
安装vue-cli（用来生成vue模版的工具）
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器。
vue-cli是脚手架，就是用配置好的模版快速搭起一个项目来，省去配置webpack的基本内容。通过vue init 模版名 项目名，然后再有几个简单设置就建起项目了。
1.输入cnpm install vue-cli –g安装，（或cnpm install --global vue-cli）
完成后在C:\Program Files\nodejs\node_global\node_modules目录下可看到vue-cli文件夹和它的文件了,还有在C:\Program Files\nodejs\node_global可看到vue的六个文件。


检测Vue安装是否成功：

参考：
https://blog.csdn.net/junshangshui/article/details/80376489
https://www.cnblogs.com/mlzdev/p/11520325.html
https://www.pianshen.com/article/139538806/
https://blog.csdn.net/qq_28285379/article/details/79073229?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control

https://www.jianshu.com/p/7d60bf86bc0b
https://www.cnblogs.com/zhaomeizi/p/8483597.html
https://www.cnblogs.com/uniapp/p/13115877.html