1. First install Nodejs
(1) You can download it from the official website - the installation is relatively simple - do not install it in the Chinese directory! ! ! !
https://nodejs.org/en/download/ 
http://xn--nodejs-np7ii83deeq211d (2) Whether nodejs is installed on your computer
node --version
2. Install NPM
If you have nodejs installed - NPM will be installed by default.
npm --version Some systems may not help you configure environment variables. You need to configure the nodejs environment variables yourself, otherwise you will not be able to use the npm command.
3. Install vue scaffolding
Use vue --version to check whether vue scaffolding is currently installed https://cli.vuejs.org/zh/guide/installation.html
If not installed use the following command
npm install -g @vue/cli
4. Create a project using vue scaffolding
After configuring the above plug-ins
(1) Create a folder locally to save the vue project
(2) Open the command cmd in this folder and use the vue ui command
You will then be redirected to this page
(3) Start creating a new project
5. Install elementui in the vue project
The first one can be installed using the command
npm install -s element-ui
6. Install axios in the vue project
The first pass command
npm install -s axios
The second kind of graphical
7. Open the vue project through tools
tool:
<1> Vscode [VScode must be used for general development]
<2> Webstorm [It is exactly the same as idea] -----I choose webstorm here
<3> Open idea---Install vue plug-in
Use webstorm to open the project you just created
Open the settings, search for node, and change it to the node path you downloaded.
npm run serve
8. One component references another component
(1) Introduce the referenced component in app.vue
(2) Declare the component
(3)Use components
(4) Create Qy165.vue in components
8.1 Parent component passes data to child component
(1) Use props in the child component to declare variables to receive data passed by the parent component.
(2) The parent component passes the attribute name when using the child component.
9. Routing
All jumps in vue are made through routing. location.href="" can no longer be used.
(1) Write index.js in the router directory
(2) Create two vue files under views
(3) Reference routing under app.vue
(4) Start the project---The effect is as shown in the figure
10. vue scaffolding project + calling background interface
(1) Write a login vue
(2) Use routing jump
(3) Quote axios, if not, use the terminal to download axios-------- npm install -s axios
(4) When springboot and vue are started, cross-domain problems will be reported
(5) Solve cross-domain problems
Cross-domain issues: Cross-domain issues may arise when accessing data from one domain in another domain.
As long as the following conditions are different, they are considered to be two domains.
[1]IP is different
[2] Different port numbers
[3] Different protocols
How to solve cross-domain issues:
The first type: front-end solution.
The second type: back-end solution. ------The back-end solution is used here
<1>Can be solved using nginx.
<2>Use annotations---use @CrossOrigin in each interface
The first one: Add @CrossOrigin annotation on each interface class
After testing, you can print out the information
The second type: create a configuration class. ---Cannot be used at the same time.
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
corsConfiguration.setMaxAge(MAX_AGE);
source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
return new CorsFilter(source);
}
}