学习不同的vue实战(1): 环境搭建

首先

• 首发博客: 个人博客

• 项目源码: 源码

• 项目预览: 预览

由于我的的喜爱和工做的须要,一直想写这样的系列教程，今天如愿以偿，可是我是第一次写，有什么错误，和指教的地方，欢迎吐槽，谢谢!

1.1.1 安装 Node.js

通常来说, 能够用如下三种方式安装 Node.js：

• 经过安装包安装(Windows 和 Mac 用户推荐)

• 经过源码编译安装(Linux用户推荐)

• 在 Linux 下能够经过 yum|apt-get 安装

Windows 和 Mac 安装：

第一步:

打开 Node官网，往下面拉，就能够看到有两个下载选项：

• 左边的是 LTS 版,就是长期支持的稳定版本，通常人都用这个版本。

• 右边是最新版本，支持不少最新的语言特征，对es6有更多的支持。(能够在 http://node.green 上面获取到 Node.js 各个版本对 ES6 的支持状况。)
  咱们选择左边的版本点击下载。

第二步:

下载好了安装包,打开,一直点击 继续 就能够安装好了。

第三步：

安装成功后，打开终端输入下面的命令。就能够看到本身的node 和npm 安装好了没有。

### Linux 用户安装：

Linux 用户可经过源码编译安装：

curl -O https://nodejs.org/dist/v6.10.3/node-v6.10.3.tar.gz
tar -xzvf node-v6.10.3.tar.gz
cd  node-v6.10.3
./configure
make
make install

备注: 这里可能会发生由于缺乏依赖包而产生的编译错误。这里遇到错误的会就自行google了。

1.1.2 淘宝 NPM 镜像

• 由于在墙的缘由啊，国内直接使用 npm 的官方镜像是很是慢的，这里推荐使用淘宝 NPM 镜像。

• 淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你能够用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽可能与官方服务同步。

第一步：安装

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：使用

支持 npm 除了 publish 以外的全部命令, 如:

$ cnpm install [name]

1.2.1 vue-cli

介绍

vue-cli是官方的项目构建工具，一个简单的构建工具，经过几个默认的步骤帮助你快速的构建Vue.js项目。

第一步 安装

npm install -g vue-cli

若是用npm下载速度慢，可使用cnpm.

第二步 选择模板

全部的官方项目模板在vuejs-templates。若是有新的模板添加进来，你须要使用下列命令，

vue init <template-name> <project-name>

也可使用 vue list 来查看官方模板列表。

目前可用的模板包括：

• browserify--全功能的Browserify + vueify，包括热加载，静态检测，单元测试

• browserify-simple--一个简易的Browserify + vueify，以便于快速开始。

• webpack--全功能的Webpack + vueify，包括热加载，静态检测，单元测试

• webpack-simple--一个简易的Webpack + vueify，以便于快速开始。

• simple - 单个HTML文件中最简单的Vue设置

1.3.1 第一个vue项目

第一步 生成项目

咱们的项目选择webpack,使用如下命令

vue init webpack vue-todos

前面就一直点回车就好了，后面使用ESLint,测试就选择no就行。

第二步 运行项目

输入下面的命令就能够运行这个项目了。

cd vue-todos
     npm install
     npm run dev

这是时候就会自动打开端口 http://localhost:8080/#/
你会看到这样的页面。那咱们就成功了。