Vue scaffolding with Element-UI component libraries

Introduce and install version 3.x of VUE scaffolding

Introduction to basic usage of scaffolding
- Vue scaffolding: Used to quickly generate Vue project infrastructure
- Vue scaffolding is a tool used to quickly create Vue projects
- Liverpoolfc.tv: cli.vuejs.org/zh/guide/
The installation
- Install version 3.x of Vue scaffolding
- It is recommended to install 3.x: this version can install both 2.x and 3.x projects
```
npm install -g @vue/cli
Copy the code
```
- Verify installation success
```
Vue -v # If the scaffold version can be prompted, the installation is successful, e.g3.3.0
Copy the code
```

Scaffolding creates vUE project way

// 1. Create a new Vue based on the interactive command line interface

     vue create my-project
   // my-project belongs to the project name. The name cannot contain Chinese characters or special characters

// 2. Create a new vUE project based on the graphical interface
     vue ui
     
// 3. Create an old vue project based on the old 2.x template
    vue install -g @vue/cli-init
    vue init webpack my-project
Copy the code

Interactive command line approach to creating vUE project steps
1. Create a project
```
Open CMD. 2. Run vue create vue-proj_01Copy the code
```
  - Vue-proj_01 indicates the project name. The name cannot contain Chinese characters or special characters, and do not contain Spaces
2. Select create project mode
  - This interface is the initial configuration interface provided by the VUE scaffolding (i.e. the interactive command line interface).
  - Up and down key to select, enter to confirm
  - Vue CLI V3.3.0 version
3. Select installed features
  - Choose Vue version: Select Vue version (2, 3)
  - Babel: Es6 to ES5
  - Router: indicates a route. In the scaffolding tool, it will automatically use routing in this project, creating a basic routing configuration (no need to manually install vue-Router). You’ll be prompted laterWhether to enable historical mode
  - CSS pre-processors: CSS pre-processors. You will be prompted to select less, SASS, stylus, etc
  - Linter/Formatter: code format verification, ESLint code format verification. You’ll be asked to choose the esLint standard again later.
4. Determine the Vue version
  - The differences in versions are explained above
5. Routing patterns
  - Enter whether to use the history routing modenInstead of using history mode, use hash mode.
6. CSS Pre-processor Select the preprocessor (less)
  - Choose the CSS preprocessor, which I’m most familiar with, less
7. Select the code style validation tool
  - Select the validation tool, in this case ESLint + Standard Config
8. Validation of Lint syntax (when to validate Lint code)
  - Lint on Save: Checks for ESLint errors when saving files.
  - Lint and fix on commit: whenever executedgit commitWhen it’s submitted, it willAutomatic correctionEslint errors.
  - I suggest choosing both, more rigorously
9. Where do you choose to save the configuration file
  - In dedicated Config files: Save them to separate configuration files
  - In package.json: Save to package.json file
  - You are advised to select the first configuration file and save it in a separate configuration file, so that you can customize the configuration.
10. Save template or not
11. Create a project
12. Start the project
  - CD vue_proj_01 Go to the project directory (Major)
  - NPM Run serve Startup project directory
13. Start-up success
  - Localhost in http://localshot:8080. Represents the local computer, or can be changed to the IP address of your own computer.
  - Network: indicates that users can access the IP address on the same LAN.
  - 8080 indicates the port number, which is used by default and is numbered backwards if it is occupied.
14. Access to view the effect
  
  Open your browser and visit http://localshot:8080. If you can see the following page, it indicates that a project has been created successfully and is running well.
15. Analyze the project structure generated by Vue scaffolding
```
Node_modules: dependency package directory public: static resource directory SRC: source directory SRC /assets: resource directory SRC /components: Component directory SRC /router.js: route js SRC /views: view Component directory SRC/app. vue: root component SRC /main.js: entry js babel.config.js: Babel configuration fileCopy the code
```
16. Project Architecture Chart
17. Possible problems
  - Problem: The project cannot start. An error occurs when running NPM run serve
  - Solution: Check whether the project folder is entered, that is, whether the CD command in the preceding operation is executed
  - Problem: The package is not successful
  - Solution: Check whether the network is normal and whether the mirror of NPM points to Taobao.
Create a new vUE project based on the graphical interface
- Create project steps based on a graphical interface
1. Execute the command
```
# entercmdExecute: vue UICopy the code
```
  - If Internet Explorer is displayed after the command is executed, you need to modify the default browser
2. Modifying the Default Browser
  - Open the control panel and enter the program
  - Select the default program
  - Setting the default program
  - The default program
3. Create a project
4. Enter the project name
5. Configuration choice
6. Select installed features
  
  Linter/Formatter
  - Use ESLINT or Prettier to check and enhance code quality
  - In fact: code style, format verification
7. Configuration items
  - Lint validates the format on save
8. Saving Configuration Information
9. Successful creation (see project Management screen)
10. Project manager
11. task
  - Other functions, you can click to see their own
  - Plug-ins can be managed in the plug-in functionality
  - This can be done in the Configuration function
12. View the home page of the project (click the “Start APP” button above to enter)
  
  Vue-cli scaffolding is integrated with the Webpack packaging tool
  - ```
  Package. json has the command to start the project by default"scripts": {
      "serve": "vue-cli-service serve".// Start the service
      "build": "vue-cli-service build".// Compile and compress
      "lint": "vue-cli-service lint"    // Correct syntax errors
    },
    // You can use vue run XXX to start the command
  Copy the code
```

Analyze the project structure

The directory structure
Real directory
- Assets and public are static files. It is customary to store pictures and font ICONS in assets
- Component: Stores components
- Views: Stores view code
- App.vue: Root component
- Main.js: Package entry files
- Router. js: routing file
- Eslintrc.js: esLint configuration file
- .gitignore: git ignores files
- Babel.config. js: Babel configuration file
- Package. json: package management configuration file
- Postcss.config. js: postCSS configuration file
Problem: If you create a project that does not have router.js, it may be because the vue and vue-router versions are different

Customize the vUE scaffolding project

Separate configuration file project (meaning to store custom configuration files separately)
- Create a vue.config.js in the root directory of your project
- Configure in this file to override the default configuration
```
    module.exports = {
        devServer: {port:8888.// Set the port
            open:true   Run the NPM run serve command to automatically access the project page}}Copy the code
```

Element – UI component library

Introduce element-UI and install it manually on the command line

Element-ui: A Vue 2.0-based desktop component library for developers, designers, and product managers
EIement-uI official website: element.eleme.cn/#/zh-CN
Element-ui provides a rich set of components that are beautifully designed and can be used directly, which saves a lot of style writing time and allows us to focus more on logical code
Command line manual installation
1. Install dependency package NPM I element-uI-s
2. Import element-UI related resources
```
# main.js
 // Manually configure element-ui
// Import the component library
 import ElementUI from 'element-ui'
// Import component-related styles
 import 'element-ui/lib/theme-chalk/index.css'
// Configure the vue plug-in
 Vue.use(ElementUI)
Copy the code
```
  - Vue.use is a function that is equivalent to mounting ElementUI onto Vue so that the project can use the ElementUI plug-in
  - The above code is written to the package entry file: main.js
Automatic installation of Element-UI based on graphical interface

steps
1. Run the vue UI command to open the GUI
```
Open the terminal and execute the Vue UICopy the code
```
2. After opening the graphical interface, create the project (here you can select the history template)
3. Go to plug-ins — add plug-ins, then search vue-cli-plugin-Element to install
  
  Select vuE-cli-plugin-Element (click) and click install in the lower right corner
4. After the installation is successful, the following configuration page is displayed
  - Import on demand: import on demand
  - Demand: demand
5. Open the project with vscode
  - Element.js imported in main.js (auto-generated code)
```
import './plugins/element.js'
Copy the code
```
  - Element-ui imported into element.js (automatically generated code)
```
import Vue from 'vue'
import { Button,Row } from 'element-ui'

Vue.use(Button)
Vue.use(Row)
Copy the code
```

Vue scaffolding with Element-UI component libraries

Introduce and install version 3.x of VUE scaffolding

Introduction to basic usage of scaffolding

The installation

Scaffolding creates vUE project way

Interactive command line approach to creating vUE project steps

Create a new vUE project based on the graphical interface

Analyze the project structure

Customize the vUE scaffolding project

Element – UI component library

Introduce element-UI and install it manually on the command line

Automatic installation of Element-UI based on graphical interface

Related Posts

Warning in vue-router 3.5.1: <router-link>’s tag prop is deprecated

Angular dynamic components

Network model –OSI & TCP/IP