Vue.js入门上手&环境搭建一

0x1.开发环境准备：

笔者环境：Mac

1.HomeBrew准备

HomeBrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件， 只需要一个命令， 非常方便，brew类似ubuntu系统下的apt-get的功能。

安装命令：ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

查看版本：brew -v

有了brew我们就可以很方便的在电脑安装各种软件，

安装软件命令： brew install XXX      卸载软件命令：brew uninstall XXX

更多用法请参考官方文档：Homebrew

2.安装NodeJs

进入终端：brew install node

等待安装完成，同样查看一下版本：node -v  （笔者v7.5.0）

3.NPM管理工具

NPM是随NodeJs一起安装的包管理工具，能够很方便地安装node开发过程中所依赖的包(模块)，提升node开发效率。

安装命令：npm install XXX  -g(全局安装，将会写入系统环境变量；非全局安装将会写入当前目录)  如遇到无法写入目录问题，在开头加入sudo

 卸载命令：npm uninstall XXX

在国内使用你npm下载的速度会比较慢，建议使用淘宝镜像.

淘宝镜像安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

0x2.Vue.js

vue.js

  vue.js是由尤雨溪大神所开发的一个JavaScript MVVM库，Vue.js的思想是数据驱动和组件化，同时吸收了React.js和Angular.js的优点。

特点：正如官网所说简洁易用、轻量灵活、数据驱动、模块化

Vue.js官网地址：vue.js

Vuejs的安装

使用上文所提到的NPM管理工具进行安装，NPM能够很好地结合webpack模块打包器进行应用开发。

进入终端： 

npm install  -g vue-cli  (vue-cli 是vue.js的脚手架用于自动生成项目模板)

vue-cli github地址：vuejs/vue-cli

安装完成后即可创建我们的第一个项目：

进入终端：

cd 切换到创建项目的目录下：

Vue init webpack <my-project>(项目名称)   #创建一个基于webpack模板的新项目

cd my-project  切换到我们项目的目录下

cnpm install 安装所依赖的module

安装完成后，就到了最后一步。

npm run dev   #将项目跑起来

                                                      如无意外，你将看到以下：

终端

项目在终端中显示运行程控，监听8080端口      

http://localhost:8080

以及在浏览器中打开http://localhost:8080，项目环境成功。

那么整个环境篇章我们先到这里结束，下一篇我们将进入项目实战。如果我的文章能让你有所收获，可以关注一下我的公众号：lijahaTalk

lijahaTalk