目录
一、组件的网络请求
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网址
Vue的脚手架webpack搭建的服务器监听的:8080
egg提供的服务器主要提供数据监听的端口:7001
用户运行:http://192.168.1.11:8080
==>加载了8080服务器提供的打包后的页面
AJAX请求 :http://192.168.1.11:8001/AJAX1
APP.vue
{{obj.title}}----{{obj.info}}
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就检测不到 就不会做代理
},
},
}
})
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文件,然后通过插件编译为css文件,然后在main.js中引入
==> 此方法一般不使用,因为这样引进来的scss是全局的
方法二:在style里面写,并且有作用域
配置:小黑窗==>vue create init (选择帮我们配置sass的加载器)
选更多选项,选择css Pre-processors==>2.0==>选sass==>lint on save ,然后就一直敲回车
APP.vue : ==>
6666
父组件改了,可以改子组件,如果子组件改了,父组件是不会改的,因为数据是往下流的
==> 单向数据流:数据自向上,由底层流向顶层,但是不能反向
APP.vue
app-----{{msg}}
Box.vue
{{arr[0]}}
组件时可以复用的,把组件当作一种标签使用,用一次,它内部的代码聚会完整的执行一次,就像时一个函数一样,使用组件就相当于在调用函数,实参就相当于组件的属性传值
开发的时候,数据尽量不要放在data中,数据驱动页面,要这个数据未来有可能发生变化,才放在data中。
项目中的本地资源打包时,webpack打包时遇到了import或者时标签内部直接写路径时,都会启用file-loader等去加载资源,如果把图片等本地资源的路径写在data中,然后页面使用,因为webpack不会读取data所以不会打包资源
把图片路径、网址写在data里面,webpack不会打包
项目中的资源一般不用本地路径,应该托管起来
引入文件的资源:import
1、v-for下面有红色的波浪线
v-for不写key会有警告,即红色波浪线,可以不管它,不会影响项目
==> 绑定key,如果数据中没有id,就绑for循环的下标index==>:key="index"就可以了
2、div等标签下面有波浪线,小黑窗报错了
==>将webpack中配置的vue.config.js里面的eslint严格模式关了==>lintOnSave:false
3、在编辑器内部还有波浪线
==>就把vscode的插件禁用,安装其它的插件(记得重启编辑器,退出)