vue-webpack-boilerplate

一个全功能的 Webpack + vue-loader 设置,具有热重载、过滤、测试和 css 提取功能。「A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.」

  • 所有者: vuejs-templates/webpack
  • 平台: Linux, Mac, Windows
  • 许可证: MIT License
  • 分类:
  • 主题:
  • 喜欢:
    0
      比较:

Github星跟踪图

vue-webpack-boilerplate

一个功能齐全的 Webpack 设置,具有热加载、lint-on-save、单元测试和 css 提取功能。

本模板兼容 Vue 2.0。对于 Vue 1.x,请使用以下命令:vue init webpack#1.0 my-project。

Vue-cli 3 来了,所以这个模板现在被认为是过时的。

这个模板是 vue-cli verison 2.* 的主要模板。

现在我们已经发布了 vue-cli 3 vue-cli 3 的稳定版本,其中包含了本模板所提供的所有功能(以及更多),我们认为本模板在未来没有任何重要的用途,所以我们将不会投入太多资源来进一步开发它。

如果有重大问题出现,我们会尝试修复,但不会再多。

如果你想让这个模板继续存在下去,请随时将其分叉。

文档

  • 对于本模板:针对本模板的常见问题进行了解答,并对每个部分进行了更详细的说明
  • 对于 Vue 2.0:关于如何与 Vue 合作的一般信息,并非针对本模板。

使用方法

这是一个 vue-cli 的项目模板。建议使用 npm 3+ 来获得更有效的依赖树。

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

这将会使用主分支来构建项目的脚手架。如果你想使用最新版本的 webpack 模板,请执行以下操作。

$ vue init webpack#develop my-project

警告 开发分支不被认为是稳定的,可能包含 bug 或根本无法构建,所以使用时请自担风险。

默认情况下,开发服务器将运行在 8080 端口。如果你的机器上已经在使用该端口,则会使用下一个空闲端口。

包含的内容

  • npm run dev:一流的开发体验。
    • Webpack + vue-loader 用于单个文件的Vue组件。
    • 保存状态的热加载。
    • 保存状态的编译错误覆盖。
    • 使用 ESLint 进行 Lint-on-save。
    • Source maps
  • npm run build:生产准备就绪。
    • 使用 UglifyJS v3 对 JavaScript 进行了最小化。
    • HTML 用 html-minifier 最小化。
    • 将所有组件的 CSS 提取到一个文件中,并使用 cssnano 进行最小化。
    • 静态资产通过版本哈希值进行编译,以实现高效的长期缓存,以及自动生成的生产版 index.html ,并为这些生成的资产提供适当的 URL。
    • 使用 npm run build --report 构建与捆绑大小分析。
  • npm run unit:在 JSDOM 使用 Jest 运行单元测试,或使用 Karma + Mocha + karma-webpack 在 PhantomJS 中运行。
    • 测试文件中支持 ES2015+。
    • 易于 mocking。
  • npm run e2e:使用 Nightwatch 进行端到端测试。
    • 在多个浏览器中并行运行测试。
    • 开箱即用——一条命令即可工作。
      • 自动处理 Selenium 和 chromedriver 的依赖关系。
      • 自动生成 Selenium 服务器。

Fork 并制作你自己的

你可以通过 fork 这个 repo 来创建你自己的 boilerplate,并与 vue-cli 一起使用。


(The first version translated by vz on 2021.01.30)

主要指标

概览
名称与所有者vuejs-templates/webpack
主编程语言JavaScript
编程语言JavaScript (语言数: 4)
平台Linux, Mac, Windows
许可证MIT License
所有者活动
创建于2015-12-26 05:25:41
推送于2023-03-01 12:48:02
最后一次提交2018-01-13 21:37:19
发布数15
最新版本名称1.3.1 (发布于 )
第一版名称1.1.0 (发布于 )
用户参与
星数9.7k
关注者数262
派生数4.4k
提交数557
已启用问题?
问题数967
打开的问题数125
拉请求数253
打开的拉请求数54
关闭的拉请求数256
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

vue-webpack-boilerplate

A full-featured Webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

This template is Vue 2.0 compatible. For Vue 1.x use this command: vue init webpack#1.0 my-project

Vue-cli 3 is here, so this template is now considered deprecated.

This template was the main template for vue-cli verison 2.*.

Now that we have released a stable version of vue-cli 3, which incorporates all features that this template offers (and much more), we think that this template doesn't have any significant use for the future, so we won't put much resource in developing it further.

We will try and fix major issues should they arise, but not much more.

Feel free to fork this template if you want to keep it alive.

Documentation

  • For this template: common questions specific to this template are answered and each part is described in greater detail
  • For Vue 2.0: general information about how to work with Vue, not specific to this template

Usage

This is a project template for vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

This will scaffold the project using the master branch. If you wish to use the latest version of the webpack template, do the following instead:

$ vue init webpack#develop my-project

:warning: The develop branch is not considered stable and can contain bugs or not build at all, so use at your own risk.

The development server will run on port 8080 by default. If that port is already in use on your machine, the next free port will be used.

What's Included

  • npm run dev: first-in-class development experience.

    • Webpack + vue-loader for single file Vue components.
    • State preserving hot-reload
    • State preserving compilation error overlay
    • Lint-on-save with ESLint
    • Source maps
  • npm run build: Production ready build.

    • JavaScript minified with UglifyJS v3.
    • HTML minified with html-minifier.
    • CSS across all components extracted into a single file and minified with cssnano.
    • Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production index.html with proper URLs to these generated assets.
    • Use npm run build --reportto build with bundle size analytics.
  • npm run unit: Unit tests run in JSDOM with Jest, or in PhantomJS with Karma + Mocha + karma-webpack.

    • Supports ES2015+ in test files.
    • Easy mocking.
  • npm run e2e: End-to-end tests with Nightwatch.

    • Run tests in multiple browsers in parallel.
    • Works with one command out of the box:
      • Selenium and chromedriver dependencies automatically handled.
      • Automatically spawns the Selenium server.

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with vue-cli:

vue init username/repo my-project