1. Introduction

  • Vue scaffolding is a toolkit for creating Vue projects, primarily a development environment built through WebPack
  • Using the ES6 specification: Don’t worry about browser compatibility, because the loader in Webpack automatically converts the ES6 specification to ES5, which is recognized by most browsers
  • Can package and compress JS into a file
  • Project files are compiled in the environment, not in the browser
  • Real-time refresh of the page can be realized

2. Preparation

2.1 Check whether the following is installed

#Verify that node, NPM, VUE-CLI scaffolding is installed

#1. Check whether node is installed
node -v

#2. Check whether NPM is installed.
npm -v

#3. Check whether vue-CLI is installed.Vue -v # Note: The version number of the scaffold is displayed
#4. Install the latest stable version of VUE
npm install vue

#If you want to view the VUE version of the current project,
#You can look for package.json"dependencies"You can view the VUE version

Copy the code

2.2 downloadvue-cliThe scaffold

Vue-cli is installed globally only once

npm install --global vue-cli
#or
npm install -g vue-cli
#or
npm i -g @vue/cli

#Pay attention to
#Check whether vUE has been installed.Vue --version # or vUE -vCopy the code

3. vue-cli 2.XXScaffolding project

3.1 Initializing the Project

#Create a new project based on the WebPack template
vue init webpack VueDemoName
#Or create a concise template
vue init webpack-simple VueDemoName

#If your project is going to compile CSS using SASS, you need to install the following additional project dependencies
cnpm install --save node-sass sass-loader@7

Copy the code

3.2 Going to the Project Directory

CD VueDemoName(Project directory name)Copy the code

3.3 Installation Project Dependencies

npm install
Copy the code

3.4 Development environment project operation

npm run dev
Copy the code

3.5 The production Environment is packaged and released

NPM run build NPM install -g serve Serve Dist Project run address: http://localhost:5000Copy the code

4. vue-cli 4.XXScaffolding project

4.1 Creating a Project

Vue Create Vuecli4 (Project name)Copy the code

4.2 Setting Configuration Items

Select manual configuration items (arrow keys can be selected) or directly configure items from the saved template

4.3 Selecting configuration Items: Space bar Select or deselect

The general options are as follows. You can also customize the options

() Babel // transcoder, which can convert ES6 code into ES5 code and execute in the existing environment. TypeScript// TypeScript is a superset of JavaScript (postfix.js) (postfix.ts) that includes and extends JavaScript syntax, The output needs to be compiled as JavaScript to run in the browser () Progressive Web App (PWA) Support// Progressive Web application () Router // vue-Router (VUE routing) () Vuex // Vuex (vue state management mode) () CSS pre-processors // CSS preprocessors (e.g. Less, sass) () Linter/Formatter // code style check and formatting (e.g. ESlint) () Unit Testing // Unit tests (Unit tests) () E2E Testing // E2E (end to end) tests copy codeCopy the code

4.4 Select a VUE version, here we default to 2.x

4.5 Whether to Use the History Router? The default value is N (Hash mode is used by default)

  • Vue-router utilizes the browser’s own hash mode and History mode features to implement front-end routing (by calling the browser-provided interface)
  • It is recommended to choose N, because it can be packaged and thrown to the server for direct use. If you want to use it later, you can also open it again by yourself.
  • If you say yes, you need to set it on the server

4.6 Selecting a CSS preprocessor: Node-sass

  • The default is Sass/Scss(with Dart-sass), but my project option is Node-sass
  • Node-sass is automatically compiled in real time. Dart-sass needs to be saved before it takes effect
  • Dart-sass is officially the main push of SASS

4.7 Selecting Eslint code validation rules, Eslint + Standard Config

4.8 When to conduct code rule detection, the default option

Lint on save // save checks copied code when Lint and fix on commit //Copy the code

4.9 How do I Store The Default Settings

4.10 Whether to Save the current configuration Item? If you save the configuration item, you can use it next time