idea创建Vue项目流程

Vue项目创建流程

一、Vue项目创建

1、官网下载node并安装

去node.js官网下载安装包下载 | Node.js 中文网下一步安装即可

2、 配置环境变量

一般会在安装时自动配置，若无效，则手动配置

安装成功，在命令行输入node -v   以及  npm -v

3、npm换成国内源，此地址可能更新，每年查询一下

npm换源（镜像）

npm config set registry https://registry.npmmirror.com（好像是不能用了，直接上网找一个）

查看是否安装成功

npm config list  或者  npm config get registry  查看npm的数据源是否更换成功

4、安装vue-cli脚手架

安装一次就可以，下次直接创建vue项目

输入npm install vue-cli -g

覆盖安装旧版本：npm install -g  @vue/cli -init

输入vue -V，查看是否安装成功

5、创建vue项目

1、在命令窗口进入到需要创建项目的工作目录如下

2、输入vue init webpack  [项目名称]

6、运行vue项目

1、进入到创建的vue项目下，如下图：

2、运行vue项目，在项目目录下输入 npm run dev命令

3、效果如下图：

二、目录介绍

• 

• 三、代码高亮

• 

四、组件介绍

1、组件组成

<!--模板-->

<template>
<h1>
  单个组件
</h1>
</template>

<!--js-->
<script>
export default {}
</script>

<!--样式-->
<style>
</style>

2、export default ：组件所有业务相关信息

export default {
  name:"aaa"//组件名称
}

1. 加载组件的流程

第一步:引入组件import 组件名称  from '路径'

第二步:挂载组件components: { 组件名称}

第三步:显示组件<组件名称 />

1. Scoped

添加表示所有样式只作用于该组件

五、组件交互

组件与组件数据的传递与获取

1、传数据

2.取数据

六、子组件反向传递数据

1. 子组件
2. 

2.父组件

七、三方库引入

查找方式：https://github.com/

1. Axios

Axios 是一个基于 promise 的网络请求库，

npm install --save axios  

npm install axios@1.5.0 --save   //安装固定的版本

局部引入：

import axios from "axios";

全局引入：main.js

局部引入：

import axios from "axios";

全局引入：main.js

Vue2

1、引入axios（npm install axios）

import axios from “axios”

2、设置请求的根路径(即web项目根路径，注意最后一个/)

axios.defaults.baseURL = “http://localhost:8888/web项目名称/”

3、将axios挂载到vue原型对象上，这样每个vue的组件都可以通过this访问$http,从而发起请求

Vue.prototype.$http = axios;

import Axios from "axios";

Vue.prototype.$http = Axios;

函数调用：

this.$http({
  method:"get",
  url:"xxx"
}).then(res=>{
   alert(res)
})

Vue3

函数调用：

axios({method:"get",url:"xxxx/xx"}).then(res =>{console.log(res); })
 axios.get("url").then(res=>{console.log(res)}

处理跨域问题：

server.port=8081
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/sjdb?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root

mybatis-plus.mapper-locations=classpath:mapper/*.xml
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

解决方法如下，这里提供两种解决方法
//方法一、可在每个controller上加@CrossOrigin注解
//方法二、使用该配置文件，SpringBoot启动时会自动读取配置文件

@Configuration
public class AxiosConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}