【学习笔记】前端（I）—— Vue2（Ⅲ）

于 2024-05-08 11:25:06 发布
阅读量955 收藏 11
点赞数 19
文章标签： 学习 笔记 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eddie_hyh/article/details/138437210
版权
本文详细介绍了Vue CLI脚手架的安装、主要功能，包括项目创建、文件结构分析，以及如何配置开发服务器。重点讲解了Vue CLI的默认配置、自定义配置以及如何在控制台输出`vm`。文章还深入探讨了Vue的进阶内容，如`ref`、`props`、`mixins`，并讨论了组件通信、本地存储和会话存储、过渡动画等，旨在帮助开发者更好地理解和使用Vue CLI。
摘要由CSDN通过智能技术生成

Vue2（Ⅲ）

4、 脚手架 Vue CLI

      4.1、脚手架是什么

安装：
第一步：全局安装npm install -g @vue/cli（如果安装不了，可以尝试以管理员身份运行cmd）
第二步：配置环境变量（配置 node_global \ node_modules 的环境变量）
第三步：测试是否安装成功vue --version（需要先重启cmd）

         Vue脚手架（Vue CLI：Vue Command Line Interface）是一种工具，它是一个官方提供的用于快速搭建Vue.js项目的 命令行工具 。Vue脚手架可以帮助开发者 创建、管理和构建 Vue.js项目，提供了一系列的命令和选项， 简化 了项目的 配置和管理过程

      4.2、脚手架的主要功能

         ① 项目创建：可以使用Vue CLI快速初始化一个Vue.js项目，提供了一些预设模板供选择，包括基本模板、Webpack模板、Vue Router模板等
         ② 项目配置：Vue CLI提供了项目的配置文件，可以在项目创建之后根据需要对项目进行配置，例如配置Babel、ESLint、PostCSS等
         ③ 开发服务器：Vue CLI内置了开发服务器，可以在开发过程中实时预览项目，并支持热重载，使得开发过程更加高效
         ④ 构建项目：Vue CLI提供了项目的打包构建功能，可以将项目打包成生产环境所需的静态文件，包括压缩、优化等处理
         ⑤ 插件系统：Vue CLI支持插件系统，可以通过插件扩展Vue项目的功能，例如添加TypeScript支持、添加PWA支持等
         总的来说，Vue脚手架帮助开发者快速搭建Vue.js项目，并提供了一些开发过程中常用的功能和工具，使得开发过程更加简单、高效

      4.3、创建脚手架项目

        第一步（创建项目）：进入到项目文件夹想要存放的位置，例如我要存放在 D:\ Project \ VsCode 下，然后使用 vue create 项目名 进行创建

1：cd D:\Project\VsCode
2：vue create vuecli_test

        接下来就能看到下面的对话，我们需要按一下键盘上的 ”↓“ 键，切换到 Vue2 （如果想要写Vue3的代码就选Vue3），然后回车
在这里插入图片描述

Tip：如果下载到一半，发现太慢了、出现各种错误、忘记配置镜像，可以进行以下操作
1、先把下载一半的文件删了
2、清理下载缓存：npm cache clean --force
3、更换国内镜像：npm config set registry https://registry.npmjs.org
4、重新创建：vue create vuecli_test

拓展
1、Babel：Babel是一个JavaScript编译器，主要用于将高版本的JavaScript代码转换成向后兼容的低版本代码，以确保代码可以在不同浏览器和环境中运行（例如可以将 ES6 转成 ES5）
2、ESLint：ESLint是一个JavaScript静态代码分析工具，可以根据预定义的规则或者自定义的规则对代码进行静态分析并给出警告或错误信息，它可以帮助开发者发现代码中的潜在问题，以确保代码格式的一致性、提高代码质量和可维护性

        如果在cmd中看到如下信息，说明项目创建成功（注意两行蓝字）
在这里插入图片描述
        第二步（开启服务器）：接下来就是在Vue.js项目中启动开发服务器

进入到创建的项目中：cd D:\Project\VsCode\vuecli_test
执行：npm run serve

        如果在cmd中看到如下信息，说明服务器开启成功（注意两行蓝字），Local是指自己在浏览器中访问服务器的地址，NetWork是指同个局域网下的其他主机想要访问该服务器的地址
在这里插入图片描述
        第三步（访问服务器）：在浏览器中输入http://localhost:8080/，如果看到下面的页面，说明可以成功访问到服务器（打开vue devtool可以看到这个项目Welcome to Your Vue.js App是HelloWorld组件的数据 – 自带的）
在这里插入图片描述

      4.4、脚手架的文件结构

        打开刚创建的额脚手架项目，可以看到如下的文件结构（可能版本不同的脚手架创建出来有细微、无伤大雅的出入）

vuecli_test/      			# 项目根目录
├── node_modules/       	# 依赖的npm包目录
├── public/             	# 公共文件夹
│   ├── favicon.ico     	# 网站图标（VUE的logo）
│   └── index.html      	# 项目的主页面
├── src/                	# 源代码目录
│   ├── assets/         	# 静态资源目录，如图片、字体等
│   ├── components/    	 	# 组件目录，存放Vue组件文件
│   ├── views/          	# 视图目录，存放页面级组件文件
│   ├── App.vue         	# 根组件文件
│   └── main.js         	# 项目入口文件
├── .gitignore          	# Git忽略文件配置
├── babel.config.js     	# Babel的配置文件
├── jsconfig.json     		# JavaScript的配置文件
├── package-lock.json   	# 锁定npm包版本的文件
├── package.json        	# 项目的npm配置文件
├── README.md           	# 项目的说明文档
└── vue.config.js			# Vue的配置文件

            4.4.1 index.html代码分析

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标签 其值就是去package.json中找name的值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js的话页面上就会出现这个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
  </body>
</html>

            4.4.2 main.js代码分析

        首先我们可以看到main.js文件的初始化代码如下，与之前不同的是出现了render函数，那么它的作用是什么呢

// 从node_modules文件夹中导入vue库
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   
  el:'#app',
  // render函数
  render: h => h(App),
})

        按我们之前的写法，应该将代码改为如下这样

// 从node_modules文件夹中导入vue库
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   
  el:'#app',
  // render函数
  // render: h => h(App),
  template:'<App></App>',
  comments:{
   App}
})

        然而当我们运行时，会发现在浏览器的控制台中有如下报错

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

        意思是“您正在使用一个运行时版本的vue（残缺的vue），您没有模板解析器，要么将需要编译的模板交给render函数、要么就使用带有模板解析器的vue（完整的vue）“，即脚手架中的vue其实是阉割版的、功能不全的vue

Q：对于模块化的语法 import Vue from ‘vue’ 是如何找到相应的js文件的呢
1、从 node_modules 文件夹中找到 vue 库
2、打开 vue 库中的 package.json 文件，这个文件会告诉我们这个库的一些相关配置，我们可以看到其中有一个配置是 “module”: “dist/vue.runtime.esm.js” ，即 vue/dist/vue.runtime.esm.js 这个文件将会作为我访问这个库的入口文件，因此我就不需要写 ”from node_modules/vue/dist/vue.runtime.esm.js“ ，因为 ‘node_modules/’ 是默认的， 'dist/vue.runtime.esm.js’是指明的库的package.json中指定的，因此只需要写from 'vue’即可

        那么我们首先尝试一下第二种方法：引入完整版的vue，完整的 vue.js 存放的路径是 node_modules/vue/dist/vue.js ，因此引入的第一种方法是写全路径： import Vue from ‘vue/dist/vue.js’ ，第二种引入方式是修改package.json的module配置，现编写代码如下，再运行一下就发现模板可以成功解析了

// import Vue from 'vue'
import Vue from 'vue/dist/vue'//完整版的vue
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   
  el:'#app',
  // render: h => h(App),
  template:'<h1>你好</h1>',//现可以解析模板了
  comments:{
   
    App
  }
})

总结：残缺版的vue不能为vue实例配置template，完整的vue才能为vue实例配置template

        然而使用阉割版的 vue 其实还是挺有作用的，完整版的vue包括核心+模板解析器（大概占1/3，虽然大概就是100+KB…），而阉割版的vue只包括核心部分，当项目完成用webpack进行打包之后，.vue文件已经会被翻译成.js文件了，因此不再需要vue的模板解析器，如果将模板解析器打包到最终的项目中，是十分不合适的（毕竟最终的项目肯定越小越好），vue的模板解析器是给我们开发的时候使用的，为此我们有必要学习第一种方法：使用render函数
        render函数（渲染函数）作为一个函数，接受一个参数，代表Vue的 createElement 函数。这个 render 函数通过调用 createElement 函数来创建虚拟DOM，并将真实DOM渲染到页面上，现我们编写如下代码，可以看到页面上将我们想要创建的标签显示出来了

import Vue from 'vue'
// import App from './App.vue'

Vue.config.productionTip = false

new Vue({
   
  el:'#app',
  render(createElement){
   
    // render的参数代表createElement函数,因此我们可以干脆把它命名为createElement
    // return createElement('标签名','内容')即是在页面上创建什么样的标签
    return createElement('h1','my name is Niki')
  }
})

在这里插入图片描述
        然而这样写跟 render: h => h(App) 这种写法还是长得有点区别的，但实际上是一样的，我们来看一下如何将render函数进行简写

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
   
  el: "#app",
  // 1 原始
  // render(createElement){
   
  //   return createElement("h1", "my name is Niki");
  // }

  // 2 由于不需要使用到箭头函数,因此可以写成箭头函数的形式
  // render:(createElement)=>{
   
  //   return createElement("h1", "my name is Niki");
  // }

  // 3 由于只有一条返回语句,因此可以将大括号和return去掉,又由于参数只有一个,因此可以将括号去掉
  // render:createElement=>createElement("h1", "my name is Niki")

  // 4 还可以将render的参数写的简单一点,反正它代表的是createElement函数,于是简写为h
  // render: h => h("h1", "my name is Niki")

  // 5 createElement函数可以接收(标签,标签体),也可以接收(组件),因此有了最原始的的那种写法
  render: h => h(App),
});

        经过上面的一步步变化，便可以得到render函数的简写方式了

      4.5、脚手架默认配置

        脚手架的配置依托webpack，因此理应在我们创建的项目中会有webpack.config.js文件，然而脚手架将 webpack 的相关配置给隐藏起来了，如果想要看具体的 webpack 配置，可以执行 vue inspect > output.js 命令，这个命令是用于将 webpack 的配置整理成一个output.js文件给我们进行查看

Tip
1、如果在VSCode的终端执行时报错，可以看看自己选择的终端是不是cmd的，如果是power shell的话切换成cmd即可
2、打开output,js文件会发现报错，因为webpack是一个对象，在js文件中总不能直接写一个对象吧，因此可以在对象前加一个 const config = 或者 export default 让它不报错
3、output,js的内容只是webpack配置的副本，只是原来的配置隐藏了于是我们把配置输出到这个文件中给我们自己看的，所以在这个文件中修改配置是没有用的

        那么如何对默认的配置进行修改呢，在 参考文档 中指出我们可以在 vue.config,js 文件中进行个性化的配置，在这个文件里配置之后，将会与webpack.config.js中的配置进行一个合并 / 重写，从而达到个性化配置的目的

引用自文档：vue.config.js 是一个可选的配置文件，如果项目中存在这个文件（和 package.json 同级），那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写

        现打开 vue.config,js 文件，我们可以看到其使用的暴露方式是 module.exports ，这是 common.js 的语法，而不是 ES6 的语法，这是因为这个文件到时候是要传递给webpack进行处理的，而webpack又是基于node.js的，而node.js采用的模块化是common.js，因此这里要使用common.js的暴露语法

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true
})

        例如现在想要修改项目的入口文件，我们可以查阅参考文档中的 pages 配置项并修改 vue.config,js 文件如下

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,
  pages:{
   
    index:{
   
      //入口文件 根目录下的src下的niki.js
      entry:'src/niki.js'
    }
  }
});

        然后再将我们的入口文件从main.js改成niki.js，最后启动项目，可以发现运行成功了

Tip
1、如果在启动项目的过程中修改了 vue.config,js 文件，那么需要重启项目

        再例如我们在现有的基础上编写代码的时候会发现，如果在代码中声明了一个变量、组件，但没使用的话会报错，虽然这理论上是无伤大雅的，这是因为脚手架开启了语法检查，不允许这种情况的出现，因此在开发的过程中如果想要允许这种情况的出现，我们可以在 vue.config,js 文件中配置如下，重启项目，我们会发现如果在代码中声明一些没有用到的变量、函数、组件的时候也不会出现烦人的报错了

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,
  pages:{
   
    index:{
   
      //入口文件 根目录下的src下的niki.js
      entry:'src/niki.js'
    }
  },
  lintOnSave:false
});

      4.6、在控制台输出vm

        当我们运行了项目之后，不同于以往，如果想要在控制台能够访问我们的vue实例，需要修改main.js文件如下

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

const vm = new Vue({
   
  el: "#app",
  render: (h) => h(App),
});

//将vm挂载到全局作用域中
window.vm = vm;

5、进阶篇

说明：接下来只会展示核心代码，大家可以依样画葫芦给搬到项目中去运行，完整代码及文件结构可以看 Panyue-genkiyo的github笔记

      5.1、ref 标签属性 – 标记标识

        ref 属性可以在 Vue 组件中访问 DOM 元素或组件实例。例如，你可以在模板中使用 ref 给 DOM 元素添加标识，然后在 Vue 实例中通过 $refs 属性来访问该元素

概要 描述
标识 在标签中使用 ref=“xxx” 来标记
访问 在组件中使用 this.$refs.xxx 来访问 
<!-- Test.vue -->
<template>
  <div>
  	<!-- 使用 ref 属性做标记 -->
    <div><input type="text" ref="acc" /></div>
    <div><input type="password" ref="pwd" /></div>
    <button @click="submit">submit</button>
  </div>
</template>

<script>
export default {
     
  methods: {
     
    submit() {
     
      // 通过 $refs 访问 inputField 元素，并将焦点设置到该元素上
      console.log("账号:", this.$refs.acc.value);
      console.log("密码:", this.$refs.pwd.value);
    },
  },
};
</script>

      5.2、props 配置 – 父传子接

        props 是用于在父组件和子组件之间传递数据的机制。它允许父组件将数据传递给子组件，并在子组件中使用这些数据

概要 描述
父传递 在标签中使用 数据名=“xxx” / : 数据名=“xxx” 进行传递
不带冒号的传递的是纯字符串；带冒号的传递的是表达式
如果是想传递表达式、数字、函数等需要携带冒号
子接收 为子组件配置props进行接收，一共有三种方式
子使用 props的数据可以像data中的数据一样访问，即 this.xxx
子组件中props和data存在同名属性 控制台会报错，但可以正常使用，并且以props的为准
props属性命名 注意不能是vue底层已征用的属性名(比如key, ref等等)
修改props数据 可以正常修改，但是控制台会报错
解决修改props数据会报错的问题 可以将props数据存储在data中的一个属性内，以后使用data中的数据来代替使用props的数据，这样修改的时候就不会报错了 
<!-- App.vue -->
<template>
  <div>
    <!-- age需要加个冒号，这样12才不会以字符串的形式传过去 -->
    <Student name="niki" gender="男" :age="12" msg="vue学习中..." msg1="1===1" :msg2="1===1"/>
  </div>
</template>

<script>
import Student from "@/components/Student";

export default {
     
  name: "App",
  data() {
     
    return {
     };
  },
  components: {
     
    Student,
  },
};
</script>

<!-- Student.vue -->
<template>
   <div class="demo">
     <!-- props与data有同名属性，以props为准，同时控制台会报错 -->
     <h1>{
  { msg }}</h1>
     <!-- 应该尽量避免修改props的数据，要修改的话，将该数据传给一个data属性，然后来操纵这个data属性 -->
     <h2>姓名:{
  { myName }}</h2>
     <h2>年龄: {
  {  age }}</h2>
     <h2>性别: {
  { gender }}</h2>
     <button @click="updateName">修改名字</button>
     <h2>msg1: {
  { msg1 }}</h2>
     <h2>msg2: {
  { msg2 }}</h2>
   </div>
</template>

<script>
export default {
     
  name: "Student",
  data(){
     
    return {
     
      msg: 'ABC',
      myName: this.name
    }
  },
  methods:{
     
    updateName(){
     
      this.myName = 'HYH';
    }
  },
  // 1、//简单声明接收
  // props: ['name', 'gender', 'age']
  //
  // 2、限制props中属性的类型 类型错误了会提示错误信息
  // props: {
     
  //   name: String,
  //   gender: String,
  //   age: Number
  // }
  //
  // 3、接收时不仅限制类型还加上默认值的指定并指定它的必须性
  props:{
     
    name:{
     
      type: String, //类型
      required: true //必要的
    },
    age:{
     
      type: Number,
      default: 99 //默认值
    },
    gender:{
     
      type: String,
      required: true
    },
    msg:{
     
      type: String,
      require:false
    },
    msg1:{
     
      type: String,
      require:false
    },
    msg2:{
     
      type: Boolean,
      require:false
    }
  }
}
</script>

      5.3、mixins 配置 – 组件共享

        mixin 是一种 Vue 中的特性，它允许你在多个组件之间共享可复用的功能。mixin 本质上是一个普通的 JavaScript 对象，其中包含了一组组件选项（如 data、methods、computed、created 等），这些选项将会被合并到使用了 mixin 的组件中

概要 描述
定义 一个 mixin 就是一个js对象，配置跟组件的配置差不多，将多个 mixin 定义在 mixin.js 中
使用 将 mixin 传入组件的 mixins 配置中
mixin的数据与组件定义时data的数据同名 采用组件定义时data的数据
mixin的方法与组件定义时methods的方法同名 采用组件定义时methods的方法
组件定义时使用的钩子在mixin中也有使用 都会调用，不过mixin中的钩子先执行 
// mixin.js
export const mixin = {
   
  methods: {
   
    showComponentName() {
   
      alert("这是" + this.$options.name + "组件");
    },
  },
  mounted() {
   
    console.log(this.$options.name + "组件已挂载");
  },
};

export const shareData = {
   
  data() {
   
    return {
   
      x: 100,
    };
  },
  methods: {
   
    showx() {
   
      alert(this.x);
    },
  },
};

<!-- App.vue -->
<template>
   <div>
      <Student />
      <hr/>
     <School/>
   </div>
</template>

<script>
import Student from "@/components/Student";
import School from "@/components/School";
export default {
     
  name: "App",
  components:{
     
    School,
    Student,
  },
}
</script>

<!-- Student.vue -->
<template>
  <div>
    <h1>学生信息</h1>
    <h3>name：{
  { name }}</h3>
    <h3>gender：{
  { sex }}</h3>
    <button @click="showComponentName">点我</button>
    <button @click="showx">看看我的x是几</button>
  </div>
</template>

<script>
import {
      mixin, shareData } from "@/mixin";
export default {
     
  name: "Student",
  data() {
     
    console.log(this);
    return {
     
      name: "Niki",
      sex: "male",
      x: 666, //如果混合中配置了与data(或者配置了相同的methods)相同的属性值，则以你的配置的属性为主(而不以mixin为主)
    };
  },
  mounted() {
     
    console.log("自己的mounted比混入的mounted快"); //但对于生命周期钩子是都会保存的(混合的钩子比你配置的钩子先跑)
  }
最低0.47元/天 解锁文章
贺一航【Niki】
关注
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 827
前端第一部分：Vue（Ⅰ）
【学习笔记】前端（I）—— Vue2（Ⅱ）
最新发布
Eddie_hyh的博客
05-04 877
前端第一部分：vue2（Ⅱ）
Vue2 路由（最最详细简单易通）看这篇就够了
2301_77638787的博客
08-16 6507
Vue2 路由（最最详细简单易通），帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。
利用＜link＞设置网页标题小图标
我的博客
01-03 647
【代码】利用设置网页标题小图标。
网页的linke rel="icon"详解 favicon深究
tfy1332的专栏
04-03 1万+
字词转换是中文维基的一项自动转换，目的是通过计算机程序自动消除繁简、地区词等不同用字模式的差异，以达到阅读方便。字词转换包括全局转换和手动转换，本说明所使用的标题转换和全文转换技术，都属于手动转换。 如果您想对我们的字词转换系统提出一些改进建议，或者提交应用面更广的转换（中文维基百科全站乃至MediaWiki软件），或者报告转换系统的错误，请前往Wikipedia:字词转换请求或候选发表您的
link标签实现网页标题小图标
KLW75
04-13 1323
1、在这个网站把你的图片转换成ico图标转换网站点击这里 2、把你生成的ico图标下载到本地，放到你的文件夹中。 3、使用link标签 <link rel="icon "href="图片的位置"> 这里的href中放对应图片的位置。 问题，为什么要转换 答：favicon必须是16*16或者32*32的，必须是8位色或者24位色的，转换一下就符合标准了。 问题：图片的格式都可以是什么？ 答：png ico gif 这三种都可以。 ...
前端复习笔记——vue篇
m0_50156803的博客
10-26 349
定义 vue.filter('过滤器名称',fn) fn:(要转换格式的数据)=>{return 转换格式的结果}1、引入vue.js 2、创建vue实例 3、指定el配置项，指定控制dom区域 4、创建vue控制的dom区域。2、组件的全局注册 mian.js中引入组件 注册vue.component（'Count',Count）vue.directive('自定义指令名称',{配置 方法里的el 指绑定该指令的dom元素})
前端学习笔记——Vue.js
lxy95512的博客
07-04 408
Vue
vue2从0学习（一）（小logo和注册问题）
m0_58565716的博客
01-14 110
组件使用
php <link rel= icon,rel=“alternate”等属性全解
weixin_28314575的博客
03-13 607
在看Wordpress主题源码的时候，发现这样一行代码：大概意思我是了解的，可看到有好几条这样的标签，有好几个不是很清楚。于是搜索了一下这方面的信息定义了。原来rel只是标签的一个属性，定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。且只能存在于 head 部分，不过它可出现任何次数。在 html 中， 标签没有结束标签。在 XHTML 中， 标签必须被正...
favicon图标引用
10-08 1935
将制作好的favicon.ico图片在html头部引用，引用方式如下：
link rel="icon" href="favicon.ico"浏览器显示图标
ppwwp的专栏
10-11 1万+
用于在浏览器地址栏里显示的图片 这样写了后，在浏览器的地址栏里，图片会显示成你给的路径的这个图片，不过貌似这个路径不能改，只能是网址根目录下的favicon.ico文件，而且现在好像不用写这个，只要根目录下有这个文件，浏览器会自动读取出来并显示。 ...
<link>标签的rel属性详解
热门推荐
雾里看花
11-08 2万+
标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任何次数。在 HTML 中， 标签没有结束标签。在 XHTML 中， 标签必须被正确的关闭。 除了HTML的标准通用属性之外，link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target,
vue中添加favicon图标
MM
09-04 1459
1、在项目根目录下放入favicon.icon图标 2、index.html中引入&lt;link ref="shortcut icon" href="./favicon.icon" type="image/x-icon"&gt; 3、在这两个文件夹下编辑代码： 在这两个文件夹添加同样的代码 引入文件图标 清缓存，重启浏览器即可 ...
网站加入图标四种方法
王佳斌
04-28 1万+
第一种 <link rel="icon" href="favicon.ico" type="image/x-icon"> 第二种 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 第三种 <link rel="icon" href="文件位置.png" sizes="16x16" ...
html网页logo属性link,html元素link标签rel="icon"添加网站favicon.ico图标
weixin_36297266的博客
06-04 5820
html元素中的link标签除了可以引用插入CSS样式表文件之外，还可以通过link标签设置网站的favicon.icon图标。什么是favicon.icon图标？网站favicon.ico图标，是显示在浏览器的选项卡标题栏、收藏夹等位置，是展示网站独有的缩略logo图标，目前主要的浏览器都支持favicon.ico图标。favicon.ico图标制作方法我们可以直接在线制作，现在网络上存在不少i...
前端学习笔记系列一：5 在项目中引入阿里图标icon
weixin_30367945的博客
05-15 324
进入到阿里的图标库网站，里面有上百万种icon，https://www.iconfont.cn，需要注册一个帐号，然后进入到这个页面，在这里点击右下角的带加号的图标，创建一个新的项目，名称与你要使用图标的前端开发项目同名。然后转到图标页去点选图标，加入购物车，选好确定后，购物车中的图标将全部加入到创建的项目中。 然后选择一种使用方式，三种格式，第一种一般不选，第二种也有与第一种相同的一个缺点...
常用的link ref
weixin_30538029的博客
07-17 1255
favicon.ico：<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /><link rel="icon" type="image/x-icon" href="/favicon.ico" />制作favicon RSS：<link rel="alternate" type="appl...
Vue.js学习笔记：计算属性与依赖关系解析
关于Vue.js的学习笔记，本文主要探讨了两个关键点：计算属性（computed properties）的使用限制以及它们之间的依赖关系。 1. 计算属性与`vm`变量 在Vue实例的计算属性函数中，不应直接使用`vm`变量，因为计算属性在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值