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
操作结果如下图所示:
自定义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 的完整路径。