vue1-day6

发表于 | 分类于 ， ， ， ， | 本文总阅读量 次
字数统计: 1.8k | 阅读时长 ≈ 6

url-loader

url-loader的使用

注意：npm有两种安装方式，本地安装和全局安装，如果是本地安装，则可以通过require来引入包，如果是全局安装是提供给命令行用的，即全局安装的方式在代码中不用require方式引用。

默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址都处理不了

这是在webpack.config.js文件中新增的处理url的erl-loader文件

1
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7600&name=[name].[ext]' }

limit传参的作用就是，当传参的大小大于文件（图片）的大小的时候，会把图片进行base64编码，转换为base64的字符串（可以通过检查网页），如果传参值小于或等于图片大小的时候，就不会进行编码。

1
limit的作用：让大图保真，让小图压缩

babel

在webpack中，默认只能处理一部分es6的新语法，一些更高级的es6或者es7语法，webpack是处理不了的，这时候就需要借助第三方的loader来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级的语法之后，会把结果交给webpack去打包到main.js中

在webpack中，默认只能处理一部分es6的新语法，一些更高级的es6或者es7语法，webpack是处理不了的，这时候就需要借助第三方的loader
来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级的语法之后，会把结果交给webpack去打包到main.js中，由于

1
2
babel-loader 8.x对应Babel-core 7.x
babel-loader 7.x对应babel-core 6.x

我安装的是最新的babel-loader，所以跟视频老师说的一些不一样
1、通过babel，可以帮我们将高级的语法转换为低级的语法，在webpack中，可以运行如下两套命令安装两套包，去安装babel相关的loader功能

1
2
第一套包：cnpm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/runtime -D
  第二套包：cnpm i @babel/preset-env babel-preset-mobx -D

2、打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
2.1

1
{ test: /\.js$/, use: 'babel-loader', exclude:/node_modules/ }

第三个exclude，表示的是，除了node_modules中的js文件，其他都可以进行转换
2.2注意：在配置babel的loader规则的时候，必须把node_modules通过exclude排除掉js文件，如果不排除，babel会把node_modules中的
第三方js文件，都打包编译，这样会非常消耗CPU，同时打包速度非常慢
哪怕，最终babel把所有node_modules中的所有js都转换完毕了，项目也无法正常运行
3、在项目的根目录中新建一个叫做.babelrc的babel配置文件，这个配置文件属于json格式，在写.babelrc文件的时候，必须符合json语法规范，不能写注释，字符串必须使用双引号
3.1在babel配置文件中写如下的配置：
1
2
3
4
{
    "presets": ["@bable/preset-env","mobx"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

4、了解，目前我们安装的babel-preset-env，是比较新的es语法，之前我们安装的是babel-preset-es2015，当然现在最新的是@babel-preset-env，它包含了所有和es***相关的语法

关于babel的几点说明

第一套包负责转换，转换器，第二套包负责对应语法的转换，语法对应关系

render

在普通页面中使用render函数渲染组件

用render来进项渲染就相当于是插值表达式，会替换el对应的指定容器，全部覆盖，就算容器之间有内容，也会全部覆盖为组件内容，但是使用原始的组件标签方式的话，在el对应的哪个容器里面就算有内容，也不会进行覆盖，只是在里面进行展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var login = {
           template: '<h1>login</h1>'
       }

       var vm = new({
           el: '#app',
           data: {},
           methods: {},
           components: {
               login
           },
           render: function(createElements){
               //createElements是一个方法，调用它，能够把指定的组件模板渲染为html结构
               return createElements(login)
               //这里return的结果会替换页面中指定el的哪个容器
               
           }

在webpack中配置.vue组件页面的解析

1、运行npm i vue -S将vue安装为依赖
2、运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖
3、运行npm i style-loader css-loader -D将解析转换css的包安装为开发依赖，因为.vue文件中会写css样式
4、在webpack.config.js文件中，添加如下modules规则：

1
2
3
modules:{

}

在webpack.config.js文件中添加resolve属性：

1
2
3
4
5
resolve：{
	alias：{
		'vue$':'vue/dist/vue.esm.js'
	}
}

总结梳理：webpack中如何使用vue

1、安装vue的包，npm i vue -S
2、由于在webpack中推荐使用.vue这个组件模板文件定义组件，所以 需要安装能解析这种文件的loader： npm i vue-loader vue-template-complier -D
3、在index.js中，导入vue模块，import Vue from ‘vue’
4、定义一个.vue结尾的组件，其中，组件有三部分组成：template、script、style
5、使用import导入这个组件,import login from ‘./login.vue’
6、创建vm的实例 var vm = new Vue（{el：’#app’,render:c => c(login)}}
7、在页面中船舰一个id为app的div元素，作为我们vm实例要控制的区域

export default和export使用方法

在node中向外暴露成员的形式：module.exports = {}，在es6中，也通过规范的形式，规定了es6中如何导入和导出模块

es6中导入模块：import 模块名称from '模块标识符' import '表示路径'
es6中导出模块，使用export default和export向外暴露成员；

在node中使用var 名称 = require(“模块标识符”)
module.exports和exports来暴露成员

注意：+ export default向外暴露的成员，可以使用任意的变量来接收
+ 在一个模块中export default只允许向外暴露一次
+ 在一个模块中可以同时使用export default和export向外暴露成员
+ 使用export暴露的成员，引入的时候，必须要加上{}，例如export title，引入的时候：import {title}，这种形式叫做按需导出
+ export可以向外暴露多个成员，import {title，title1}，同时如果某些成员，我们在import的时候不需要则可以不再{}中定义引入
+ 使用export导出的成员，必须严格按照导出收的名称来引入
+ 使用export导出的成员，如果就想换个名称来接收，可以使用as来起一个别名

scoped属性选择器实现原理

只要设置了scoped属性以后，就会给该组件的 根容器设定一个自定义属性[]（可以通过网页检查元素看到）然后通过该属性在div样式设置上添加来生效。
样式的是scoped是通过css的属性选择器实现的。

-------------本文结束感谢您的阅读-------------