vue脚手架剖析

阿尧不会武功

已于 2022-09-23 20:04:44 修改

阅读量283

点赞数

于 2022-09-22 21:29:12 首次发布

本文链接：https://blog.csdn.net/qq_72580318/article/details/126998297

版权

系列文章目录

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、vue框架样式穿透
二，publlic和assets文件区别
三，代理服务器配置
四，组件通信和事件绑定
总结

前言

重点：搭建服务器

一、样式穿透更改子组件的样式

1.父组件修改子组件的样式通过使用样式穿透进行修改，通过父组件进行修改子组件

2.选择器写法父组件选择器 >>>子组件选择器

3.适用在对第三方ui组件进行修改样式时候使用

代码如下

#d1 >>> .h1{

color: blue;

}

二，publlic和assets文件区别

1.静态引入的时候：public文件和assets都可以通过路径进行引入，public文件采用绝对路径进行访问，assets文件下资源采用相对路径

2.动态引入时候：public文件资源可以使用路径字符串进行引入，assets文件下的资源，不能通过绑定路径字符串进行引入，必须通过require进行引入

区别如下

静态引入资源

1. 如果引入public下图片



<img src="favicon.ico" alt="">

2.如果资源放在assets文件夹下使用相对路径访问

<img src="../assets/logo.png" alt="">

动态引入资源

1.动态引入public下资源可以使用路径引入方式，把路径赋值给data一个变量，src绑定这个变量

<img :src="path1" alt="">

2. 动态引入assets下资源，不能使用路径的方式进行引入,但是可以通过rquire("资源路径 ") 进行绑定

<img :src="path3" alt="">

 data() {
        return {
            path1: 'favicon.ico',
            path2:"../assets/logo.png",
            path3:require("../assets/logo.png") 
            //本地每一图片都需要添加path3
        };
    },

三，代理服务器配置

为什么需要代理服务器？

1.当我们需要访问别人的服务器的时候会被浏览器机制给拦截就是我们常说的跨域，解决跨域有很多方法，我们搭建代理服务器就是一种解决跨域的方法，原理就是通过搭建的服务器去向别人的服务器去拿数据，服务器之间是不会存在跨域的问题。

搭建代理服务器步骤;

1. 在需要请求的路径定义代理服务器

 created() {
        // 配置代理服务器进行解决跨域 在vue.config.js进行配置
         //   /myDouyu 就是定义
        fetch("/myDouyu/api/room/list?page=10").then(res=>{
            return res.json()
        }).then(res=>{
            console.log(res)
        })
    },

2.找到vue.config.js路径文件

module.exports = defineConfig({

在这里面进行搭建 2，3

})

3.搭建字段


  transpileDependencies: true  ,
  // 如果该字段为true 接着去查看package.json的browserlist是否在低级浏览器范围内，
//如果处于低级浏览器范围内，会把node_modules下载的第三方的高级的写法进行babel转换，
//如果字段设置为false 会把node_modules第三方的高级的代码写法原封不动进行打包，
//导致低级浏览器访问报错的问题
  publicPath:"/", //启动页的地址
  outputDir:"dist", // 打包之后的文件名
  lintOnSave:false,// 保存时候是否检查语法，

4.搭建开发环境服务器配置

 // 开发环境服务器配置
  devServer:{
     open:true,// 浏览器可以自动打开
     host:"localhost" ,//配置主机地址
     port:"8080", //配置端口号
    // 配置代理服务器
     proxy:{
      //属性发请求时候为路径添加路径前缀 
      // http://m.douyu.com/api/room/list?page=10
      // /myDouyu一般会加在服务器地址的后面   /myDouyu/api/room/list?page=10
        "/myDouyu":{
          target:"http://m.douyu.com/", // 目标服务器地址
          pathRewrite:{
            "^/myDouyu":""   //路径重写
          },
          changeOrigin:true //实现跨域 改变请求源
        }

     }
  }

.四，组件通信和事件绑定

1.如何在父组件定义子组件在Components文件下创建页面所需要的组件

2. 导入使用的组件在js导入组件名以大驼峰的命名方式进行命名

// @/components/MyCom.vue   @相当于src这一层路径

import MyCom from "../components/MyCom.vue"

3. 在页面里面注册组件，components

export default {
    data(){
      return{
      }
    },
  components:{
      MyCom     //注册组件
  },
  methods: {
    f1(v){
        console.log(v)
    }
  },
}

4. 使用组件建议大家子组件使用的数据在父组件定义