vue第三版

具名插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具名插槽的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn>
<!--        根据插槽的名字对标签的内容进行一个填写和补充-->
<!--        注：在进行插槽的使用的时候，一定是单个的标签，不能是多个标签的套用-->
        <p slot="left">我在左边</p>
        <p slot="center">我在中间</p>
        <p slot="right">我在右边</p>
    </cpn>
</div>
<template id="cpn">
    <div>
        <p>你好我是一个组件</p>
        <a>点击我一下</a>
        <slot name="left">左边</slot>
        <slot name="center">中间</slot>
        <slot name="right">右边</slot>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        components:{
            cpn:{
                template:"#cpn"
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

注：在根据名字对插槽进行标签的内容补充的时候，注意一定是单标签不能是多个标签套用

编译的作用域

编译的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编译作用域</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    isShow使用的是vue实力中的isShow-->
    <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <div>
        <p>我是子组件</p>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        data:{
          isShow: true
        },
        components:{
            cpn:{
                template: "#cpn",
                data(){
                    return{
                        isShow:false
                    }
                }
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注：当Vue在进行属性的查找的时候。他会首先查找自己的作用域。注意看代码

作用域插槽

目的：父组件替换插槽中的标签，但是内容有子组件来进行提供

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn>
<!--        通过slot-scope获取子组件中的数据-->
        <template slot-scope="slot">
            <span>{{slot.data.join(' - ')}}</span>
        </template>
    </cpn>
</div>
<template id="cpn">
    <div>
        <p>你好，我是一个子组件</p>
<!--        通过:data进行子组件数据的获取-->
        <slot :data="langue">
            <ul>
                <li v-for="item in langue">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        components:{
            cpn:{
                template:"#cpn",
                data() {
                    return {
                        langue:["Java","JavaScript","C++","C#","Go","switch"]
                    }
                }
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

注：

:data(名字随便去，目的是为获取子组件中的数据)
在父组件中通过slot-scope进行子组件中数据的获取
join()对数组中的集合进行分割，并通过某些东西进行连接

模块化（导入导出）

ES6中的模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6中的模块化</title>
</head>
<body>
<!--type="module"进行模块化，解决相关的命名冲突的问题，但是在进行模块话之后，会导致其他的js文件在进行函数的调用的时候无法进行函数的调用-->
<script src="04ES6中的模块化.js" type="module"></script>
<script src="04ES6中的模块化1.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

注：type="module"进行模块化，解决相关的命名冲突的问题，但是在进行模块话之后，会导致其他的JS文件在进行函数的调用的时候无法进行函数的调用

Webpack详解

1、定义

本质：webpack是一个现代的JavaScript应用的静态模块打包工具

grunt与glup和webpack的不同

grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心
webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能是他附带的功能。

2、webpack的安装

依赖于node环境
node为正常执行各种代码，其中具有很多的依赖包。其自带的npm在很大程度上方便了我们的管理。

webpack下载命令，@后边表示的是版本，-g表示的是在全局变量中进行安装。

npm install webpack@3.6.0 -g
1

检查webpack的版本

webpack --version
1

局部安装webpack在本地进行webpack的安装

npm install webpack@3.6.0 --save-dev
1

3、webpack打包

export const name="张三";
export const age=23;
export const height=50;
1
2
3

import {name,age,height} from "./aa";

console.log(name);
console.log(age);
console.log(height);
1
2
3
4
5

在进行webpack打包的时候，需要在被打包的文件的同一级目录

webapck 需要打包的文件名  输出的文件路径
1

终端中的命令便是运行的全局

4、什么是loader

loader是webpack中一个非常核心的概念

loader的使用过程

步骤一：通过npm进行下载安装使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置

通过webpack进行处理css文件的时候，需要引进相关的loader，webpack不支持css文件的处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0StYp1Em-1656243609672)(C:\Users\ZSGgoogosoft\AppData\Roaming\Typora\typora-user-images\1655347596956.png)]

webpack 中文文档 (docschina.org) 官网地址

在通过webpack对css文件进行打包的时候需要需要下载相应的loader

css-loader的下载方式

npm install --save-dev css-loader
1

style-loader的下载方式

npm install --save-dev style-loader
1

在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10

在main.js文件中引进css

import {name,age,height} from "./js/aa";

console.log(name);
console.log(age);
console.log(height);
//将css文件看成一个模块，之后通过require进行引进
require('./css/test.css')
1
2
3
4
5
6
7

执行npm命令对css文件以及js文件进行打包

npm build
1

webpack执行css文件打包错误

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.

解决方案

在webpack.config.js文件中进行相关配置

mode: 'development'
1

5、less文件的处理

编写相关的less文件
对less文件进行引入
下载相应的配置

$ npm install less less-loader --save-dev
1

在webpack.config.js进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vue脚手架

1、脚手架的安装

CLI是Command-Line Interface翻译为命令行界面
其是官方发布的一个Vue.js项目脚手架
使用vue-cli可以快速的搭建Vue开发环境以及对应相关的webpack的相关的配置

脚手架使用的前提

具有node环境

vue脚手架的全局安装

npm install @vue/cli -g
1

查看vue的版本

vue --version
1

在脚手架3中抽取脚手架2的模板

npm install @vue/cli-init -g
1

脚手架2创建项目

vue init webpack 项目名称
1

脚手架3进行项目的创建

vue create 项目名称
1

2、脚手架2进行项目创建

node可以直接执行js文件，其为js的运行提供了一个运行环境

.eslintignore表示可以进行忽略的地方

在package.json文件中符号所表示的意思

^表示的安装的以来的版本是当前的版本或者是大于现在的版本但是大版本是不变的
~表示安装的当前版本或者是小于当前版本，大版本不变

package-lock.json

package-lock.json为package.json的映射文件，其中所安装的依赖的版本为具体准确的版本。

在static文件中存在的图片等文件在进行打包的时候，会原封不动的直接被打包进dist文件中而不会做任何的修改。
tignore表示可以进行忽略的地方

在package.json文件中符号所表示的意思

^表示的安装的以来的版本是当前的版本或者是大于现在的版本但是大版本是不变的
~表示安装的当前版本或者是小于当前版本，大版本不变

package-lock.json

package-lock.json为package.json的映射文件，其中所安装的依赖的版本为具体准确的版本。

在static文件中存在的图片等文件在进行打包的时候，会原封不动的直接被打包进dist文件中而不会做任何的修改。

相关阅读:
[附源码]Python计算机毕业设计Django项目管理系统的专家评审模块
 OpenCV DNN C++ 使用 YOLO 模型推理
 计算机毕业设计JAVA网上商城购物系统mybatis+源码+调试部署+系统+数据库+lw
网络安全自学手册
 【C++】匿名对象 ② ( 将 “ 匿名对象 “ 初始化给变量 | 将 “ 匿名对象 “ 赋值给变量 )
PyCharm 无法登陆 Codeium 的解决方法
 Centos生命周期，Centos和Centos Stream区别
 Windows和Linux上使用Prometheus+Grafana监控Springboot
ArcGIS10.8 连接 PostgreSQL 及遇到的两个问题
 批量更新Postgresql的序列
原文地址：https://blog.csdn.net/qq_46524280/article/details/125473384