Table of contents
Second, the premise: build a good NodeJS environment
3. Use scaffolding vue-cli (version 2.X) to build the project
3. SPA completes the development of routing
1. What is vue-cli?
vue-cli is the scaffolding of vue.js, which is used to automatically generate the project template of vue.js+webpack,
The creation command is as follows:
vue init webpack xxx
Note: ①xxx creates the name of the project for itself
②You must first install some necessary environments such as vue, vue-cli, webpack, node, etc.
Second, the premise: build a good NodeJS environment
Install vue-cli:
The doc commands are executed separately (separately):
npm install -g vue-cli
npm install -g webpack
-g: js dependencies will be downloaded to node_global
-s: will be packaged ---> the dependencies stored in package.json in the vueproject file, when the project is packaged, the jar package dependencies inside will be packaged together
-d: Only depended on in the development environment ---> DevDependecies (development environment) stored in package.json in the vueproject file. When packaging the project, the jar package inside will not be packaged and is only used by local projects
Notice:
① After successful installation, the following files will appear in node_global in the nodejs file:
② After the installation is complete, open the command window and enter vue -V (note that the uppercase "V" is here) , if the corresponding version number appears, the installation is successful.
3. Use scaffolding vue-cli (version 2.X) to build the project
## Use scaffolding to create a project skeleton
## This step can be understood as: use eclipse to create a maven web project
first step:
Create a file in a non-Chinese directory, where the command window cmd is to be opened
Step two:
Enter in the command window: vue init webpack spa1 [Note: spa1 refers to the project name, which can be customized] and press Enter.
#This command is used to create a SPA project, which will generate a folder named "spa1" in the current directory.
third step:
Enter Q&A mode
Note:
1.Project name: project name, the default is the name of the input spa1, press enter directly
2.Project description: project description, press enter directly
3.Author: author, fill in whatever you want or press enter directly
4.Vue build: Multiple-choice questions, generally choose the first one
4.1Runtime + Compiler: recommended for most users//Run plus compile, official recommendation, choose it
4.2Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//Only at runtime, if there is already a recommendation, choose
the first one
Good projects will have related routing configuration files
6. Use ESLint to lint your code: Whether to use ESLint to limit your code errors and styles. N is not needed for beginners, but it is generally used in actual projects, so that multiple people can develop a consistent syntax
7. Set up unit tests: whether to install unit tests N
8.Setup e2e tests with Nightwatch?: Whether to install e2e tests N
9.Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
Yes, use Yarn
No , I will handle that myself //Multiple choice: choose the first item "Yes, use NPM" whether to use npm install to install dependenciesSelect all and press Enter to generate the project. The following content appears to indicate that the project creation is complete!
# Project initialization finished!
Just wait for the scaffolding to build.
OK, after the download is complete, you can see this project file appears in our folder.
Clicking in is like this:
third step:
Import the project into HBuilder X,
Note: The project built by vue-cli, after the console npm run dev starts, the default debugging address is port 8080, but most of the time, we have to develop several projects in parallel, and it is very likely that port 8080 has been occupied, so It involves how to change the port number of the debugging address.
Introduce the project directory structure :
build folder (this folder is mainly for some configuration 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
dev.env.js [configure development environment]
prod.env.js [configure production environment]
index.js [this file configures the proxy server, for example: modify the port number]
node_modules folder (according to when storing npm install package.json configures the folder of the npm installation package generated)src folder (source code directory (the folder most used in development)
assets [shared styles, pictures]
components [the place where business codes are stored, which are divided into components for storage, a page is a component, and there will be Contains many components]
router (setting routing)
App.vue [vue file entry interface]
main.js [corresponding to App.vue to create a vue instance, which is also an entry file, corresponding to the entry configuration in webpack.base.config.js]static folder (the stored files will not be processed by webpack, and can be directly referenced. 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 place the swf file in this folder for reference )
package.json [This file has two parts that are useful: setting commands in scripts and dependencies and devDependencies corresponding to global and local downloads respectively]Detailed explanation of package.json:
Under the root directory of each project, there is generally a package.json file, which defines the various modules required by the project, as well as project configuration information (such as name, version, license and other metadata) . The npm install command automatically downloads the required modules according to this configuration file, that is, the running and development environment required to configure the project
the fourth step:
## We need to change the current path to the SPA folder, and then install the required modules.
## This step can be understood as: After the maven web project is successfully created, modify the pom file to add dependencies.
cd spa1 #Change the path to the spa1 folder
npm install #Install all npm modules required by the project
Then press Enter.
Copy http://localhost:8080 to search in the address bar:
Then it's OK, the visit is successful! !
SPA access process:
1. Visit index.html
2. index.html manages the #app boundary through the vue instance in man.js, and formulates the App.vue template at the same time
3. App.vue contains logo pictures and anchor points, and the corresponding relationship between anchor points and components exists in router/index.js, all of which point to a component
4. Finally, the logo image and the content of helloworld.vue are displayed in App.vue
3. SPA completes the development of routing
Now, let's start tinkering with the project:
Step 1: Introduce the routing js dependency package (note: this step is not needed, it is already there when creating the SPA page)
Step Two: Define Components
About.vue
Home.vue
Step 3: Define the relationship between routing and components
Step 4: Mount the boundary ( note that the system has been mounted by default here )
Step 4: Define anchors & Step 5: Trigger events
Show results:
When clicking on the homepage:
When clicking about:
4. Nested routing
Requirements: Different pages appear when the button Home/About is clicked.
Implementation idea:
Nest the two components "About Webmaster" and "About This Site" in the "About" component.
Use the children attribute
Effect display: when you click About
When clicking About Webmaster:
When clicking about this site:
5. Knowledge summary
