This article is aimed at novice friends, how to use the latest version of scaffolding to create a project and grasp the structure and configuration of the project.

About the Old version

Vue CLI package name changed from vue-cli to @vue/ CLI. X or 2.x), you need to run NPM uninstall vue-cli -g or YARN global remove vue-cli to uninstall it.

Node Version Requirements

Vue CLI 4.x Requires node. js v8.9 or later (V10 or later is recommended). You can use n, NVM or NVM-Windows to manage multiple Node versions on the same computer.

The installation

npm install -g @vue/cli
# or
yarn global add @vue/cli
Copy the code

Run the vue –version command to check whether the vUE scaffold version is installed successfully.

vue --version
Copy the code

configuration

Run the following command to create a new project

Vue Create Project nameCopy the code

Enter a project name to configure the project

? Please pick a preset: (Use arrow keys)
  20190907 ([Vue 2] router, less, babel, eslint) // Previously saved custom configuration items
  Default ([Vue 2] babel, eslint)  // Create Vue2 project by default
  Default (Vue 3) ([Vue 3] babel, eslint) // Create a Vue3 project by default❯ Manually select the features// Automatic configuration item
Copy the code

If default is selected, the project will be created directly. The project will include Babel, eslin and other dependencies such as Router/Vuex, which need to be manually installed.

If you select Manually select features, you will go to the next option :(manual configuration is recommended)

? Check the features needed forYour project: ◉ Choose the Vue version// Select the Vue version
 ◉ Babel 	// Es6 syntax is commonly used in vue projects, but sometimes our projects need to be compatible with older browsers, and we need to introduce Babel plug-ins to convert ES6 to ES5
 ◉ TypeScript 	// typeScript extends JavaScript by adding types.Insights into Progressive Web App (PWA) Support// Progressive Web Application (PWA) support
 ◯ Router 	// Whether to use routes
 ◯ Vuex 	// Whether to use Vuex◯ CSS Pre - processors// Whether to use a CSS preprocessor, such as less, sass, etc❯ ◉ Linter/Formatter// Formatter
 ◯ Unit Testing 	// Unit tests
 ◯ E2E Testing	/ / end to end
Copy the code

Nowadays, projects that use TypeScript need to select the above four

Select version:

? Choose a version of Vue.js that you want to start the project with 
  2.X ❯3.x 
Copy the code

Whether to use class-style component syntax, you can choose y if you want to keep the TypeScript class style in your project.

Use class-style component syntax? (y/N)
Copy the code

Use Babel with TypeScript for auto-detection padding:

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpili
ng JSX)? (Y/n) 
Copy the code

ESlint configuration:

Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only     // Error notification only
  ESLint + Airbnb config                // Loose mode
❯ ESLint + Standard config              // Normal mode
  ESLint + Prettier                     // Strict mode
  TSLint (deprecated)                   // TypeScript format validation tool
Copy the code

Verification time:

Save-time validation is usually the option to make changes in time, if your code style is similar to ESLint’s, or if you’re confident that it’s cool, commit time. Yes man, I chose the first option.

Pick additional Lint features: (Press <space> to select, <a> to toggle all, < I > to invert se lection) ❯◉ Lint on save// Check when savingInsights into Lint and fix on commit// Repair and commit time detection
Copy the code

Additional options:

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // Store in a dedicated configuration file
  In package.json // Store it in package.json
Copy the code

Whether to save the current configuration item:

Save this as a preset for future projects? (y/N) 
Copy the code

directory

|-- node_modules	// Dependencies required by the project
|-- public              // Static resource storage directory
|   |-- index.html	// Project master container file
|   |-- favicon.ico	// Project default index image
|-- src
|   |-- assets		// Put some static resource files, such as images, ICONS, fonts
|   |-- components	// Public component directory
|   |-- views	// Business component directory
|   |-- App.vue		// The top-level base routing component
|   |-- main.js		// The main entry file
|   |-- router.js	// Route configuration file
|-- .editorconfig	// Code specification configuration file
|-- .eslintrc.js	// EsLint code specification checks configuration files
|-- .gitignore		// Git upload to ignore the file format
|-- babel.config.js	// Babel configuration file
|-- package-lock.json	// The dependency package version locks the file
|-- package.json	// Basic project information configuration file
|-- postcss.config.js	// CSS preprocessor configuration file
|-- vue.config.js	// WebPack configuration file (same as webpack.config.js)
Copy the code

Packaging related parameters

You can simply configure it in package.json

Real-time packaging run

npm run serve
Copy the code

Physical packaging

npm run build
Copy the code

Package and generate analysis report

./node_modules/.bin/vue-cli-service build --report
Copy the code

Browser Parameters

Directly in vue.config.js, for example

module.exports = {
  lintOnSave: true.// Enable ESLint code checking when saving code
  devServer: {		// Save and compile the configuration segment in real time
    open:true.// Automatically open the browser
    port: 12306		// Service running port}}Copy the code