VUE葵花宝典第一式–环境搭建

工欲善其事，必先利其器。本文记录进行vue开发时候的准备工作，包括node.js安装、webpack的安装、npm安装等。

node.js安装

1. windows中安装 首先去官网下载： 下载之后直接运行，各种下一步。 测试是否成功安装：npm -v 查看npm默认配置：npm config ls 可以根据需要改变npm下载文件所存放的默认路径： 首先创建文件夹：node_modules，然后执行下面命令 npm config set prefix “F: odejs ode_modules” 查看发现路径已经改变。 windows下node.js的安装介绍到此结束。
2. linux下安装 本文centos7下安装node.js,其他系统版本略。 首先下载： wget https://nodejs.org/dist/v12.13.0/node-v12.13.0-linux-x64.tar.xz 解压： tar zxvf node-v10.9.0-linux-x64.tar.xz 改名： mv node-v10.9.0-linux-x64 nodejs 其实解压之后直接进入目录就可以使用了。 我们创建软连接方便使用： ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ ln -s /usr/local/nodejs/bin/node /usr/local/bin/ 注：我的nodejs目录解压在/usr/local中。 nodejs安装完毕.

再推荐一个工具：cnmp 淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 安装方法：

npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v //测试是否成功安装

有可能会出现 “不是内部或外部命令”的情况 需要配置下环境变量即可。 安装之后需要更改下镜像源地址 此处可以安装nrm管理可用的镜像源地址以及当前所使用的镜像源地址。

cnpm install -g nrm  //这里就是用的cnpm命令了

安装完成之后执行：

nrm ls    //查看镜像地址

然后执行命令改变源镜像地址：

nrm use taobao

如图，已经改变了地址，星号代表当前使用地址。

webpack安装

npm安装时候包括本地安装和全局安装： 全局安装就会安装到上文配置好的安装目录下，供全局使用。 本地安装就是安装到指定目录下，不同应用使用不同版本。

本地安装webpack：
cnpm install --save-dev webpack
cnpm install --save-dev webpack@<version>

全局安装webpack：
npm install --global webpack

注意：4.0版本以上还需要安装 cli,因为webpack 4将 cli 分离出来了。

npm install --save-dev webpack-cli

实战过程： 这样是安装最新版，再测试安装是否成功： 由于安装的是新版本需要cli，他居然贴心提示是否安装，当然选y了。 然后有报错： 看来服务还是做得不够智能,应该全局安装。 手动安装全局cli：

npm install -g webpack-cli

安装成功之后再测试： 又报错！ 最后查看源码，修改成绝对路径路径：

再测试： 该死的版本号终于出现了，安装成功。（和网上介绍的攻略不同，出现这么多错误的原因可能版本问题，也可能是我修改了包路径问题，也可能是安装过程中某个细节处理的不对，暂不追查。） 总结：实际使用中可能不同电脑（64位、32位） 、不同系统，不同版本的环境会有各种各样的问题，一定要胆大心细，遇到问题逐步分析寻找解决方案。

安装脚手架

执行命令：

cnpm install -g vue-cli

检查安装成功： vue -V

使用脚手架初始化项目

进入项目路径，比如新建一个项目文件夹project,cd进入然后执行：

vue init webpack xy-system-ui

根据贴心提示运行：

npm install   //如果速度慢可以这样：cnpm install

脚手架生成的文件如图：

根据提示可以运行hello world了：

npm run dev

大吉大利：