最近一段时间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 这样就可以看到如下效果了
然后项目目录如下
好了,希望我这个能帮助新手少走弯路 手好酸哦 哈哈