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
- Webpack +
-
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)