Title Vue CLI Introduction
Vue CLI is a global command tool officially provided by Vue.
It can help us quickly create a standardized basic framework for developing Vue projects. [Integrated webpack configuration]
benefit:
1. Ready to use out of the box, zero configuration
2. Built-in tools such as babel
3.Standardization
Usage steps
1. Global installation (once):
yarn global add @vue/cli or npm i @vue/cli -g
2. Check Vue version:
vue --version
3. Create project shelf:
vue create project name (project-name) (Project name - cannot be in Chinese)
4. Create options (select Manually select features)
? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) //Default configuration (create Vue 3 project, default configuration babel and eslint) Default ([Vue 2] babel, eslint) //Default configuration (create Vue 2 project, default configuration babel and eslint) > Manually select features //Manually select configuration
5. Manual selection function (select according to needs)
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Babel //es6 to es3 ( ) TypeScript //Whether to enable TypeScript support ( ) Progressive Web App (PWA) Support //Whether to support Progressive Web App (PWA) (*) Router //Whether to start routing ( ) Vuex //Whether to enable Vuex (*) CSS Pre-processors //Choose a CSS preprocessor css/less (*) Linter / Formatter //Select code specification checking tools and code formatting tools ( ) Unit Testing //Unit testing tool ( ) E2E Testing //End-to-end testing tool
Detailed explanation
Babel: Babel is a JavaScript compiler that converts new versions of JavaScript code into code that is compatible with older versions so that it can run in different browsers. Selecting the Babel option will enable Babel compilation to ensure your project code is compatible across a variety of environments.
TypeScript: TypeScript is a type-safe superset of JavaScript that adds static type checking to JavaScript. Selecting the TypeScript option will enable TypeScript support, enabling you to code your project using TypeScript, providing stricter type checking and intellisense.
Progressive Web App (PWA) Support : Allows you to configure your project to support Progressive Web Apps (PWA). PWA is a web application development method that aims to provide a user experience similar to native mobile applications, including offline access, push notifications, etc.
Router: Vue Router is the official route management library for Vue.js, used to build routes for single-page applications. Selecting the Router option will enable Vue Router and configure routing functionality for your project.
Vuex: Vuex is the official state management library for Vue.js, used to manage state in applications. Selecting the Vuex option will enable Vuex and configure state management capabilities for your project.
CSS Pre-processors: This option allows you to choose a CSS preprocessor, such as Sass/SCSS, Less, or Stylus, for writing styles in your project. Preprocessors allow you to use variables, nested rules, and more to better organize and maintain styles.
Linter / Formatter: This option allows you to choose a code specification checking tool and a code formatting tool. Typically, you would choose ESLint for code specification checking and Prettier for code formatting. This helps ensure code quality and consistency.
Unit Testing and E2E Testing: These options allow you to choose unit testing and end-to-end (E2E) testing tools such as Jest and Cypress to ensure the reliability of your application sex and stability.
6. Select the vue version (select 2.x)
? Choose a version of Vue.js that you want to start the project with (Use arrow keys) 3.x //Vue 3 > 2.x //Vue 2
7. Whether to use history mode (enter y or n to select according to your needs)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
Vue has two common routing modes: Hash Mode and History Mode. They control how Vue Router manages URLs and affect how URLs are displayed as users navigate within the application.
Hash Mode:
URL format: In hash routing, the URL will be represented by the # character followed by a hash fragment, for example: http:/// /localhost:8080/#/home.
Features: Hash routing stores routing information in the hash portion of the URL, so the browser will not send a request to the server every time the route switches. /strong>, which means the entire page will not be refreshed. This is a common routing method designed for Single Page Applications (SPA).
Advantages: Easy to deploy, no special server configuration required, good compatibility, and can work in most environments.
Disadvantages: The URL contains the # character, which is not very beautiful; Cannot handle 404 errors directly, you need to use the window.onhashchange event to handle routing changes; does not support server-side rendering (SSR ).
History Mode:
URL format: Historical routes use ordinary URL format, without # character, for example: http://localhost:8080/home
Features: History routing changes the URL through the history.pushState method of HTML5, so it is more like a traditional multi-page application. This allows you to use cleaner, better-looking URLs that don’t require the # character.
Advantages: The URL is more friendly, does not contain # characters, and is more in line with user expectations; supports handling 404 errors; can be used in conjunction with server-side rendering (SSR).
Disadvantages: Server configuration is required to handle routing; if the server is not configured correctly, it may cause a 404 error when refreshing the page; in some environments, special basic path configuration is required. The development environment webpack avoids the problem of history mode.
How to choose
Whether to choose hash routing or historical routing usually depends on your project needs and server environment. If your application is a single page application (SPA) and does not need to handle 404 errors, hash routing may be an easy choice. If you need friendlier URLs, support for handling 404 errors, or need to be used with server-side rendering (SSR), then historical routing may be a better fit.
8. Select css preprocessing (select according to your needs)
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) > Less //Personal preference less Stylus
9. Choose the style of eslint code specification (select according to your needs)
? Pick a linter / formatter config: (Use arrow keys) ESLint with error prevention only ESLint + Airbnb config > ESLint + Standard config //Standard style ESLint + Prettier
ESLint with error prevention only: This option will configure ESLint, but it will only perform code specification checking and will not format the code. It will check the parts of the code that may cause errors to ensure that your code is quality and follows JavaScript coding standards.
ESLint + Airbnb config: Selecting this option will configure ESLint and use Airbnb’s code specification configuration. The Airbnb Code is a widely adopted JavaScript coding standard that includes a set of rules and best practices to ensure code quality and consistency.
ESLint + Standard config: This option configures ESLint to use the Standard specification (JavaScript Standard Style). The Standard specification is another JavaScript coding specification that emphasizes concise, consistent, and easy-to-read code.
ESLint + Prettier: Select this option to configure ESLint and integrate the Prettier code formatting tool. This means that in addition to code compliance checks, your code will be automatically formatted to ensure it adheres to a consistent coding style.
How to choose
The degree of specification checking and formatting varies from specification to specification. Depending on your needs and team agreements, you can choose the option that suits your project.
10. Select the style of eslint code specification (you can press enter directly)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Lint on save //Verify when saving ( ) Lint and fix on commit //Verify when submitting code to version control system
11. Select the configuration file generation method (you can press Enter directly)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files //Configuration files are generated into separate files In package.json //Include configuration information in the project's package.json
12. Whether to save the default and use it directly next time (optional, enter y or n to select)
? Save this as a preset for future projects? (y/N) //Do you want to save the current configuration as a preset for future projects?
If you choose to save (y)
? Save preset as: //Default name
13. Waiting for installation, project initialization is completed
Start service
npm run serve
Select all
