node 以及vue环境配置

写在前面：

1. 这篇文档不涉及vue的语法，单纯是处理laravel中怎么用vue进行组件化开发的（vue组件化开发需要编译 .vue文件，但是我们又需要laravel环境，所以不能用vue提供的脚手架工具）
2. vue需要许多node的依赖，在laravel中集成vue，只需将其依赖安装即可（package.json）
3. Elixir是laravel提供的处理文件编译的功能，支持很多js和css的预处理器（包括sass）
4. Elixir是基于gulp的，而gulp是一个自动化构建工具，是基于node的，所以首先需要安装node

node环境部分

安装node

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

$ sudo apt-get install nodejs

node -v  npm -v 查看版本

更换淘宝npm镜像

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org//第一种
$ sudo npm config set registry "https://registry.npm.taobao.org"//第二种
cnpm -v 查看

安装全局gulp

$ sudo npm install -g gulp
gulp -v 查看版本

node安装可以根据自己的喜好自行安装。

vue部分

首先说明，我是根据laravel中国里的一篇文档实践的，他弄好了一个laravel集成vue的小demo，github地址，组件部分的语法本篇不做介绍，首先拉下来他这个项目

  git clone  https://github.com/jcc/vue-laravel-example.git

进入项目根目录，安装依赖

$ cnpm install

gulp编译

gulp // 运行所有任务
gulp --production  //运行所有任务并压缩所有 CSS 及 JavaScript

然后每次编译会比较麻烦，可以监听编译

Paste_Image.png

gulp watch

Paste_Image.png

个人tips: 终端有的时候你要用，监听着编译不方便，phpstom也有控制台，平时用不到，可以编译监听用。

关于Elixir

Elixir部分的语法大家可以参考龙哥的laravel视频--静态资源管理工具

问题总结：

1. 我以前习惯直接切超级用户安装，但是这次遇到了很多问题，应该在普通用户下，但是要sudo 给权限。$ sudo
2. gulp在package中有依赖，但是在此之前要先全局安装。
3. 在cnpm install之后还遇到一个问题，gulp编译的时候报错说我有个组件没有装，但是经过查找确实已经下载好了，全部删除node_modules文件,重新安装一遍，但是还是说没有，然后我就单独cnpm install 这个文件，就OK了。

Paste_Image.png

参考链接：
gulp node npm镜像 vue Elixir laravel中国参考文档