Vue.js(一) 基于vue-cli脚手架工具构建Vue项目

Vue.js 是目前最火的前端框架，几乎没有之一，资深程序员这样评价它："Vue.js 兼具 Angular.js 和 React.js 的优点，并剔除它们的缺点"，大多前端工程师都视 Vue.js 为心中最理想的框架。

学习 Vue.js 建议查看 Vue 官方中文文档。当然如果英语能力好的话，推荐查看 Vue 官方英文文档，因为对某些 API 的理解，还是英文的文档更容易一些。个人看法，勿喷。

简介

vue-cli 是一个快速构建 Vue.js Project 的脚手架工具。

安装

注: Node.js 版本(>=4.x, 6.x 更高) npm 版本 3+ 并且保证有 Git 环境

npm install -g vue-cli

用法

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

例:

vue init webpack first-vue-project

上述命令是在当前目录下，通过vue-cli命令根据 vuejs-templates/webpack 下的模板，生成一个包含 webpack 的 Vue 项目，名为 first-vue-project

相关模板

模板名	模板介绍
browserify	包含 browserify 和 vueify 功能齐全的项目模板，可以设置热更新(Hot Reload)、代码检测 (Lint) 以及单元测试
browserify-simple	快速构建简易 browserify 和 vueify 项目的模板
pwa	vue-cli 基于 webpack 模板构建 PWA(渐进式网页应用)
simple	简单构建一个只包含 HTML 的项目
webpack	一个功能齐全的 webpack + vue-loader 模板，模板中还可以设置热更新、代码检测(Lint)、测试以及 CSS 提取
webpack-simple	快速构建基于 webpack + vue-loader 的简易项目模板

以上模板可通过命令 list 查看

vue list

操作结果如下图所示:

vue-list.png

自定义template

官方的 template 可能有时并不能满足你的需求，此时，你可以 fork 官方的模板，进行自己的改造，并通过 vue-cli 工具根据改造后的 template 进行构建:

vue init username/repo my-project

例:

vue init QC-L/webpack-multi-page-template vue-multi-page-demo

其中 username/repo 为 Github 的 repo 标题，例如 QC-L/webpack-multi-page-template
构建工具会根据你提供的标题，进行模板下载，并进行 template 构建

本地template

除了 Github 源之外，你还可以使用本地 template 进行构建:

vue init ~/fs/path/to-custom-template my-project

例:

vue init ~/vue/template/webpack-multi-page-template vue-multi-page-demo

此时，template-name 就为你本地 template 的完整路径。

参考文章

https://github.com/vuejs/vue-cli