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
-
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
-
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
-
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 later
Whether 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.
-
Determine the Vue version
- The differences in versions are explained above
-
Routing patterns
- Enter whether to use the history routing mode
n
Instead of using history mode, use hash mode.
- Enter whether to use the history routing mode
-
CSS Pre-processor Select the preprocessor (less)
- Choose the CSS preprocessor, which I’m most familiar with, less
-
Select the code style validation tool
- Select the validation tool, in this case ESLint + Standard Config
-
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 executed
git commit
When it’s submitted, it willAutomatic correctionEslint errors. - I suggest choosing both, more rigorously
-
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.
-
Save template or not
-
Create a project
-
Start the project
- CD vue_proj_01 Go to the project directory (Major)
- NPM Run serve Startup project directory
-
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.
-
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.
-
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
-
Project Architecture Chart
-
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
-
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
-
Modifying the Default Browser
-
Open the control panel and enter the program
-
Select the default program
-
Setting the default program
-
The default program
-
-
Create a project
-
Enter the project name
-
Configuration choice
-
Select installed features
Linter/Formatter
- Use ESLINT or Prettier to check and enhance code quality
- In fact: code style, format verification
-
Configuration items
- Lint validates the format on save
-
Saving Configuration Information
-
Successful creation (see project Management screen)
-
Project manager
-
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
-
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
-
Install dependency package NPM I element-uI-s
-
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
-
Run the vue UI command to open the GUI
Open the terminal and execute the Vue UICopy the code
-
After opening the graphical interface, create the project (here you can select the history template)
-
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
-
After the installation is successful, the following configuration page is displayed
- Import on demand: import on demand
- Demand: demand
-
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
-
-