Vue——组件的网络请求、组件的Scss、单向数据流、组件的注意点

目录

一、组件的网络请求

1)网络代理配置

2)网络公共路径

二、组件的Scss

三、单向数据流

四、组件的注意点

1、组件的认识:

2、项目的资源打包问题

3、波浪线


一、组件的网络请求

 配置的过程:

 1.在组件的原型链上配置axios工具,并配置公共网址

 main.js文件中:

 import axios from "axios"

 Vue.prototype.$axios=axios

 Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"

 2.配置8080服务的代理

 vue.config.js文件:

 3.组件中使用:

   this.$axios("/ajax1")

 整个运行的流程: $axios是原型上的那个工具 就会基于它的baseURL请求"/ajax1"  因此就会请求 baseURL+"/ajax1"

 然后baseURL又是8080服务器中代理配置过的  它发现网址中包含了代理的关键字网址 就会去代理请求 target网址

1)网络代理配置

Vue的脚手架webpack搭建的服务器监听的:8080

egg提供的服务器主要提供数据监听的端口:7001

用户运行:http://192.168.1.11:8080

==>加载了8080服务器提供的打包后的页面

AJAX请求 :http://192.168.1.11:8001/AJAX1

APP.vue




Nav1.vue




1、设置跨域在config.default.js里面

config.cors={origin:"*"}

2、代理服务器:

vue.config.js

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false, //关闭eslint的严格模式检测,
	devServer: {
		port: 8080, //默认vue脚手架配置就8080
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		// proxy: {
		// 	'/api': 'http://localhost:7001',
		// },
		proxy: {
			'/xiangmu': {
				target: 'http://192.168.101.109:7001',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/xiangmu': '/'   //就是将xiangmu替换为 /
				}, 
				//请求时重写pathname: 
				//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
				//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
				
				//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
			},
			
		},
	}
})

2)网络公共路径

main.js

import Vue from 'vue'
import App from './App.vue'
import axios from "axios"
//组件的原型属性
Vue.prototype.age=23 
//以后上线了就只用改这一行代码
axios.defaults.baseURL="http://192.168.101.109:8080/xiangmu"
//配置公共url  如果这个axios去请求 "ajax1"  它实际的网址是http://192.168.101.109:8080/xiangmu/ajax1
Vue.prototype.$axios=axios
//把它放在了axios,就不用import引入了  就可以直接在APP.vue里面使用this.$axios
var vm=new Vue({
  render: h => h(App),
}).$mount('#app')
console.log(vm)

APP..vue




vue.config.js    ==>配置8080服务的代理

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false, //关闭eslint的严格模式检测,
	devServer: {
		port: 8080, //默认vue脚手架配置就8080
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		// proxy: {
		// 	'/api': 'http://localhost:7001',
		// },
		proxy: {
			'/xiangmu': {
				target: 'http://192.168.101.109:7001',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/xiangmu': '/'
				}, 
				//请求时重写pathname: 
				//项目组件中请求的是http://192.168.101.109:8080/xiangmu/ajax1
				//8080服务器就会帮我们代理请求 http://192.168.101.109:7001/ajax1
				
				//项目组件中请求的是http://192.168.101.109:8080/test/ajax1 那么proxy就检测不到 就不会做代理
			},
			'/sina': {
				target: 'http://某个公司的网址',
				secure: true, //如果代理的target是https接口,需要配置它 
				pathRewrite: {
					'^/sina': '/aaa'
				}, 
			},
		},
	}
})

Nav1.vue




二、组件的Scss

方法一:自己创建一个scss文件,然后通过插件编译为css文件,然后在main.js中引入

==> 此方法一般不使用,因为这样引进来的scss是全局的

方法二:在style里面写,并且有作用域

配置:小黑窗==>vue create init  (选择帮我们配置sass的加载器)

选更多选项,选择css Pre-processors==>2.0==>选sass==>lint on save ,然后就一直敲回车

APP.vue :  ==>




三、单向数据流

父组件改了,可以改子组件,如果子组件改了,父组件是不会改的,因为数据是往下流的

==> 单向数据流:数据自向上,由底层流向顶层,但是不能反向

APP.vue




Box.vue




四、组件的注意点

1、组件的认识:

组件时可以复用的,把组件当作一种标签使用,用一次,它内部的代码聚会完整的执行一次,就像时一个函数一样,使用组件就相当于在调用函数,实参就相当于组件的属性传值

开发的时候,数据尽量不要放在data中,数据驱动页面,要这个数据未来有可能发生变化,才放在data中。

2、项目的资源打包问题

项目中的本地资源打包时,webpack打包时遇到了import或者时标签内部直接写路径时,都会启用file-loader等去加载资源,如果把图片等本地资源的路径写在data中,然后页面使用,因为webpack不会读取data所以不会打包资源

把图片路径、网址写在data里面,webpack不会打包

项目中的资源一般不用本地路径,应该托管起来

引入文件的资源:import

3、波浪线

1、v-for下面有红色的波浪线

v-for不写key会有警告,即红色波浪线,可以不管它,不会影响项目

==> 绑定key,如果数据中没有id,就绑for循环的下标index==>:key="index"就可以了

2、div等标签下面有波浪线,小黑窗报错了

==>将webpack中配置的vue.config.js里面的eslint严格模式关了==>lintOnSave:false

3、在编辑器内部还有波浪线

==>就把vscode的插件禁用,安装其它的插件(记得重启编辑器,退出)

你可能感兴趣的:(webpack,前端,vue,网络,scss)