最近一段时间vue js非常流行，伴随着vue2.0版本的发布，一套前端基于node环境下的自动化环境构建方法随之出现，自己最近尝试用vue-cli着构建一个基于vue的环境，我尽可能的将每一个知识点讲清楚
1、npm:引自百度百科
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用
我的理解就是npm是一个基于命令行的形式来进行软件的下载和上传 很方便，免去了我们去到官网上去下载。一般我们只需要下载安装nodejs即可，里面包含有npm，下载安装完成之后记得配置环境变量，这个就不详细说了
2、vue-cli
概念：我的理解就是一个官方的脚手架，下载安装这个之后你可以通过简单的几个命令就能搭建一个基于node环境的一个前端项目，由于新版的vue-cli已经集成了webpack 所以下载了这个脚手架之后就不需要在下载webpack了
言归正传，我来说说自己搭建的一个流程吧，其中也会遇到好多问题，都是一步一步百度查看的，血泪啊 哈哈~~
1、在已经下载安装了node js后，我们要把下载的包（或者说是文件）安装在哪里了，比如我执行npm install vue-cli 安装成功后我该在哪里找到他了，如果我们没有对npm的配置进行自己的设置，那么他默认情况下就会在当前目录下找node_modules 这个目录，然后把下载下来的包放在这里面，突然感觉这样有点乱，不好管理，所以开始的时候就更改npm的默认安装目录，设置方法如下
如下图，我想把以后下载全局安装的包就放在node目录下 ，创建两个文件 node_cache 和node_global
,然后进入cmd中执行
npm config set prefix "XXX\nodejs\node_global"
npm config set cache "XXX\nodejs\node_cache"
两个命令后 你可以通过 npm config list 来查看你刚刚更改的配置
执行完这个步骤之后接下来我们要进行环境变量的配置了，如果这不没有操作的话，会影响到之后的许多操作哦，所以这部很重要
打开环境变量配置界面，
新建NODE_PATH：D:\Program Files\nodejs\node_global\node_modules 这个就是我们开始创建用来存全局安装包的目录 然后在系统变量下进行如下配置
找到path变量 增加一个配置 D:\Program Files\nodejs\node_global\
ok，执行完上面几个步骤之后接下来我们就可以使用npm进行包的安装
我在使用npm的时候发现如果我们用他默认的服务器地址的话 下载的速度太慢 因为服务器是在国外哈 ，一般的解决方法是安装一个淘宝镜像，但是我嫌麻烦，我直接把npm的服务地址改成淘宝这块的效果是一样的 下载速度很快，具体配置如下，进入cmd 输入 npm config set registry "https://registry.npm.taobao.org" ，设置完成之后 我们就可以使用淘宝的服务了 速度很快的。
1.开始安装vue-cli
执行 npm install vue-cli -g 命令 这时候npm就开始下载
安装完成之后，执行vue -V 记得哦 v是大写的 这时候会出现相应的版本号，这代表你已经安装成功了，如果提示该方法不是系统命令，说明之前环境变量配的有问题，好好检查下
2、利用脚手架vue-cli进行项目模块的搭建
首先创建一个用来存放项目的文件夹，然后进入cmd命令界面 进行如下操作
vue init webpack +你的项目名字
执行以上命令后会让你填写项目的一些信息 这个是我自己填写的 大家可以先按照这样来写，英文很简单，我就不一一解释了
3.按照vue-cli的提示一步一步进行操作，其中有可能会出现问题，我用的是window7 系统，然后我在进行npm install 的时候会出现下面这个问题
我也是搞了半天，百度了一下 发现这个是window7特有的问题 解决方法如下
npm install phantomjs-prebuilt@2.1.15 --ignore-scripts
ok，执行完成之后整个项目算是搭建完成了，我来运行下进入我们刚刚创建的项目目录下
即webpack 后你的项目文件
cmd中执行 npm run start 然后打开浏览器，输入localhost:8080 这样就可以看到如下效果了
然后项目目录如下
好了，希望我这个能帮助新手少走弯路 手好酸哦 哈哈
网友评论