目录
1.安装Nodejs
查看电脑是否安装nodejs
node --version
傻瓜式安装
不要安装在中文目录下
2.安装NPM
如果安装了nodejs--默认会安装NPM
npm --version
3.安装vue脚手架
查看当前是否安装vue脚手架
vue --version
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
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); } }