Table of Contents
1. vue-cli installation
1.1 Installation prerequisites
1.2 What is vue-cli
1.3 Install vue-cli
2. Build the project using vue-cli
2.1 Use scaffolding to create project skeleton
2.2 Go to the new project directory and install the required modules
2.3 How to modify the port number
2.4 Add element-ui module
2.5 package.json detailed explanation
3. -g, -S, -D parameters in the install command
4. Vue project structure description
5.What is *.vue file
6. Startup process
7. Development examples
7.1 Make a custom component Welcome
7.2 Add “User Management” and “About Us” components
7.3 Nested routing
1. vue-cli installation
1.1 Installation Prerequisites
Before installing vue-cli, you need to make sure the nodejs environment is installed and verify the nodejs environment installation:
- node -v
- npm -v
1.2 What is vue-cli
vue-cli is a scaffolding for vue.js, used to automatically generate vue.js + webpack project templates.
Create command:
vue init webpack xxx
- xxx creates a name for the project for yourself
- You must first install some necessary environments such as vue, vue-cli, webpack, node, etc.
1.3 Install vue-cli
Order:
npm install -g vue-cli
After successful installation, you will see the vue-cli directory under the configured node_global\
ode_modules directory.
Enter the following command in the cmd window to verify whether the vue installation is successful. Note: the V here is capitalized. If successful, the version number will be printed
vue -V
2. Use vue-cli to build the project
2.1 Use scaffolding to create project skeleton
In the cmd command window, go to the project storage directory and run the following command:
vue init webpack spa1
spa1 is the project name, just enter it according to the implementation.
Note 1: The cmd command line window displays Chinese garbled characters, which is mostly caused by the character encoding mismatch of the cmd command line window. Modify the cmd window character encoding to UTF-8, execute in the command line: chcp 65001, switch back to Chinese: chcp 936, this The two commands only take effect in the current window, and the previous encoding will be restored after restarting. Can’t control it.
Next, the installer will enter a question-and-answer installation mode:
1) Project name: Project name, the default is the name spa1 when entering, just press Enter
2) Project description: Project description, just press Enter
3) Author: Author, fill it in casually or press Enter directly
4) Vue build: multiple choice question, generally choose the first one
- Runtime + Compiler: recommended for most users //Runtime + Compiler, officially recommended
- Runtime-only: about 6KB lighter min + gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files – render functions are required elsewhere//runtime-only
5) Install vue-router: Whether you need vue-router, Y choose to use it, so that the generated project will have relevant routing configuration files
6) Use ESLint to lint your code: Whether to use ESLint to limit your code errors and style. N
7) Setup e2e tests with Nightwatch?: Whether to install e2e tests N
8) Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM (select this option)
> Yes, use Yarn
> No, I will handle that myself
Select everything and press Enter to generate the project. The following content appears to indicate that the project creation is completed.
#Project initialization finished!
#========================
2.2 Go to the new project directory and install the required modules
This step is similar to maven installing dependencies through pom files.
Order:
npm install
If you need some traffic, please use a faster network.
After the installation is complete, in the command window, Go to the project directory and run the following command:
npm run dev
Run the project, and a message will appear: Your application is running here: http://localhost:8080, which means the operation is successful. Enter http://localhost:8080 in the browser address bar to view it.
2.3 How to modify the port number
The project uses port 8080 by default when running. If other programs also use this port, conflicts will occur. If tomcat also uses port 8080 by default, the port number needs to be changed to avoid conflicts.
Open the config/index.js file in the project directory and modify the port in the dev part.
2.4 Add element-ui module
When adding element-ui, stop the service first and use the following command to install the element-ui module.
npm install element-ui -S
Note 1: Use vue + elementUI to create a SPA project. Generally, the project structure is as follows:
* Vue + ESLint + webpack + elementUI + ES6
Vue: main framework
* ESLint: Helps us check grammatical errors in Javascript programming, so that when multiple people develop in a project, consistent syntax can be achieved
* Webpack: is a static module bundler for modern JavaScript applications. Core configuration of the entire project
* elementUI: It is a style framework based on vue, which contains many encapsulated component styles.
* ES6: The full name is ECMAScript6.0, which is the next version standard of JavaScript and was released in 2015.06
2.5 package.json detailed explanation
Under the root directory of each project, there is generally a package.json file that defines the various modules required by the project, as well as the project’s configuration information (such as name, version, license and other metadata). The npm install command automatically downloads the required modules based on this configuration file, which is to configure the running and development environment required for the project.
For details, please see the relevant notes in the material “package-detailed explanation.json”
3. -g, -S, -D parameters in the install command
| Command | Meaning |
|---|---|
| npm install | Download all dependent modules configured in dependencies and devdependencies in “package.json” and save them to the node_modules directory of the project |
| npm install xxx -g | Install globally, download dependent modules and save them to the %node_home%\ ode_global\ ode_modules directory |
| npm install xxx -S | Write to package .json’s dependencies object, and save it to the project’s node_modules directory |
| npm install xxx -D | Write it to the devDependencies object of package.json, and Save to the node_modules directory of the project |
Note 1: When git clone the project, there is no node_modules folder in the project file. Why?
We know that this file (project_home\
ode_modules) stores the dependent modules used in our project development. This folder may be hundreds of megabytes in size. If it is placed on GitHub, it will be very slow when others clone it. At this time, I thought of using a package.json dependency configuration file to solve this problem. In this way, when everyone downloads this project, they only need to enter the project directory and directly npm install npm will go there to find the required function libraries, that is, dependencies.
The full name of the abbreviated command, please note that -S and -D are all capital letters.
| Command | Abbreviation |
|---|---|
| install | i |
| –save | -S |
| –save-dev | -D |
| –global | -g |
4. vue project structure description
| Folder | File | Function |
|---|---|---|
| build | This folder is mainly for some configurations of webpack | |
| webpack.base .conf.js | Webpack basic configuration, development environment, and production environment all depend on | |
| webpack.dev.conf.js | Webpack development environment configuration | |
| webpack.prod.conf.js | webpack production environment configuration | |
| build.js | Production environment build script | |
| vue-loader.conf.js | This file is the configuration file for processing .vue files | |
| config folder | Configuration file | |
| dev.env.js | Configure development environment | |
| prod.env.js | Configure the production environment | |
| index.js | This file configures the proxy server, for example: modifying the port number | |
| node_modules | The folder that stores the npm installation package generated according to the package.json configuration during npm install | |
| src folder | Source code directory (the most commonly used folder in development) | |
| assets | Shared styles , pictures | |
| components | where the business code is stored, which is divided into components for storage. A page is a component. A page also contains many components | |
| router | Set routing | |
| App.vue | vue file entry interface | |
| main.js | Create a vue instance corresponding to App.vue, which is also the entry file, corresponding to the entry configuration in webpack.base.config.js | |
| static folder | The files stored will not be processed by webpack and can be referenced directly. For example, if you want to reference a swf file, you can configure it in webpack. For the loader that processes files with the swf suffix name, you can also directly add swf The file is placed in this folder for reference | |
| package.json | This file has two parts that are useful: the settings in scripts command and in dependencies and devDependencies, corresponding to globally downloaded and locally downloaded dependency packages |
5. What is *.vue file
The *.vue file is a custom file type that uses HTML-like syntax to describe a Vue component. Each .vue file contains three types of top-level language blocks ,