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