Vue-cli使用自定义模板

Posted on | Edited on | In | Comments: | Views:

Vue，越来越流行，因为它的易用性和良好的性能，随之而来的是vue-cli初始化项目，没有适用所有场景的模板，根据自己的业务场景初始化项目，才是最酷的。

官方模板

  1. 前提安装 Vue-cli
1
$ npm install -g vue-cli
  1. 初始化方式
1
$ vue init <template-name> <project-name>

例如：

1
$ vue init webpack test

创建一个 webpack 为模板的 名为 test 的项目

  1. 查看官方的模板
1
$ vue list

会输出

1
2
3
4
5
6
★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★  pwa - PWA template for vue-cli based on the webpack template
★  simple - The simplest possible Vue setup in a single HTML file
★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

这就是官方提供给我们的几种模板， 拿webpack为例， 默认初始化是没有sass相关包的， 当然也没有http请求的包，那么就需要一个适合自己的模板来初始化项目。

  1. 自定义模板并使用

以MAC为例

vue-cli 默认的模板存放在 ~/.vue-templates目录下面， 我们可以根据官方的webpack来自定义自己的模板 webpack2。

用自定义模板的时候

1
vue init ~/.vue-templates/webpack2 test

参考

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