WebKong的网络日志

分享工作中的所用、所想、所感。

0%

Vue-cli使用自定义模板

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
7
★  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