Vue脚手架

最新推荐文章于 2024-05-09 11:32:07 发布

IT光

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量67

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wqguang/article/details/131638037

版权

1.安装Nodejs

查看电脑是否安装nodejs
node --version
nodejs官网

傻瓜式安装

不要安装在中文目录下

2.安装NPM

如果安装了nodejs--默认会安装NPM
npm --version

3.安装vue脚手架

查看当前是否安装vue脚手架
vue --version 
vue脚手架安装-官网
npm install -g @vue/cli
-g: global全局

安装后再查看就显示vue脚手架了

4.使用vue脚手架创建工程

vue ui
跳转浏览器

5.vue工程中安装elementui

第一种可以使用命令来安装
npm install -s element-ui
第二种使用图形化安装

6.在vue工程中安装axios

第一种通过命令
npm install -s axios
第二种图形化

7. 通过工具打开vue工程

工具有:

Vscode
Webstorm [它和idea一模一样]
idea打开---安装vue插件

此处选着 Webstorm

Webstorm-官网

傻瓜式安装

进入WebStorm

8. 一个组件引用另一个组件

创建一个Qy165.vue

(1) 引入被引用的组件

(2)声明该组件

(3)使用组件

9.父组件向子组件传递数据

App.vue（父组件）

（1）在子组件中使用props来声明变量用来接受父组件传递的数据。

（2）父组件在使用子组件时属性名来传递

10. 路由

vue中的跳转都是通过路由进行跳转的。不能再使用location.href="".

例：

创建两个vue

11. vue脚手架工程+调用后台接口

测试：后台使用Springboot整合Shiro项目

新建Login.vue

修改index.js

在main.js中导入axios并挂载到vue对象中

启动idea启动vue 因为跨域问题报错：

11.1跨域问题:

从一个域访问另一个域的数据时可能出现跨域问题.

只要以下条件不同就认为是两个域.

[1]ip不同

[2]端口号不同

[3]协议不同

11.2.如何解决跨域:

第一种: 前端解决

第二种: 后端解决

后端：

<1>可以使用nginx解决。

<2>使用注解---再每个接口中使用@CrossOrigin

<3>搞一个配置类。---与@CrossOrigin注解不能同时使用
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);
 }
}