Vue Cli Template

screenshot of Vue Cli Template

Vue Cli Template

基于vue官方最新cli4.x定制,意在提升项目开发体验及可维护性;适用中大型项目,适用PC & H5;含前端团队开发规范文档;VSCode + ES6 + vue + vue-router + vuex + lodash(荐) + axios(荐) + element-ui(荐) | vant(荐);

Overview

This content provides recommendations and guidelines for developing projects using the CLI. It covers topics such as setting up the local and testing environments, developing plugins and tools, using axios, and following development best practices. It also includes suggestions for naming conventions, handling CSS in components, and using Vue Router and Vuex. Additionally, it provides recommendations for IDE, JavaScript, and CSS coding practices, as well as guidelines for commenting code.

Features

  • Project setup using CLI: Generate project and setup development, stage, and test environments
  • Development tools and plugins: Recommendations for essential tools and plugins for development, such as VSCode, ESLint, and Vue Devtools
  • Development best practices: Guidelines for environment variables, data flow in Vue components, global component registration, and component naming conventions
  • CSS management in components: Recommendations for using CSS Modules, class naming conventions, and modularization of styles
  • Vue Router and Vuex usage: Guidelines for defining routes, managing shared data using Vuex, and module reuse
  • Miscellaneous code recommendations: IDE suggestions, JavaScript variable naming conventions, module design principles, and code commenting guidelines

Installation

Here are the steps to install and set up the project:

  1. Install project dependencies: Run npm install to install all the required packages.
  2. Before starting actual development, it is recommended to commit the package-lock.json file. Use npm update with caution after development.
  3. To start the application in the development environment, run npm run serve or npm start.
  4. To build the application for the stage environment, run npm run build:stage.
  5. To build the application for production, run npm run build:prod.
  6. Run npm run lint to check and fix the source code.
  7. Run npm run test:unit to execute unit tests.
  8. Run npm run dist to start the static resource server.
  9. To manage the version number, use npm version major|minor|patch. The version format follows major.minor.patch conventions.
  10. For local development, create a .env.development.local file to override environment variables such as mock data and API endpoints.
  11. In the stage environment, the client side allows customization of the API prefix for easy debugging. Use the browser console to input the desired prefix.

Please note that detailed specifications for environment variables and axios usage can be found in the corresponding documentation files.

Summary

This content provides a comprehensive guide for setting up and developing projects using the recommended CLI. It covers various aspects such as environment setup, development tools, coding standards, and usage of Vue Router and Vuex. By following these guidelines, developers can ensure a standardized and efficient development process for Vue.js projects.