1.1.1 安装 Node.js

Windows 下 Node.js 与 npm 的安装与配置
建站不啰嗦，上手跟我做（十九）在 Linux 系统安装 Nodejs

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/#/
你会看到这样的页面。那我们就成功了。