Vue Templates Logo Vue Templates
Vue Template screenshot

Vue Template

Author Avatar Theme by Brickies
Updated: 30 May 2018
26 Stars

:tada: 一个集成了 webpack + vue-loader + vuex + axios 的自定义 vue-cli 模板，其中包含 webpack 热更新，linting，测试以及 css 处理器等内容

Github

Overview

The Vue Webpack template is a comprehensive toolkit for developers looking to integrate Vue.js with a strong build system and modern development practices. This custom template combines Webpack, Vue-loader, Vuex, and Axios, making it an ideal starting point for any Vue 2.0 project. Emphasizing developer experience, the template supports hot reloading, linting, testing, and CSS preprocessing, ensuring a smooth workflow throughout the development process.

Setting up a project with this template is straightforward and allows for swift local development with an out-of-the-box configuration. By running simple commands, developers can initiate local servers, build production-ready applications, and run tests, all while taking advantage of tools like UglifyJS for minification and Jest for unit testing.

Features

  • Hot Module Replacement: Provides real-time hot reloading for single-file Vue components, allowing developers to see changes instantly without refreshing the browser.
  • Linting and Error Monitoring: Integrated ESLint for real-time code analysis ensures code quality and helps catch errors during development.
  • Production Optimization: JavaScript files are minified using UglifyJS v3 and HTML files are compressed with html-minifier, enhancing performance in production.
  • CSS Bundling and Optimization: Combines all component CSS into a single file and compresses it with cssnano, simplifying asset management in larger projects.
  • Source Maps: Simplifies debugging in development by generating source maps, making it easier to trace errors in original source code.
  • Unit Testing Support: Comes with Jest for unit testing in JSDOM and provides an alternative testing setup using Karma + Mocha, allowing flexibility in test environments.
  • End-to-End Testing: Utilizes Nightwatch for E2E testing with easy parallel execution across multiple browsers, facilitating comprehensive testing scenarios.
  • Custom Template Creation: Enables developers to fork the project and create personalized Vue CLI templates, fostering customization and adaptability in projects.