学习内容
⊙ 作用域插槽
⊙ ES6模块的导入和导出
⊙ 认识webpack
⊙ 安装webpack
⊙ 使用webpack
⊙ loader
⊙ ES6转ES5
作用域插槽
一句话来说就是: 父组件替换插槽的标签,但是内容由子组件来提供
现在做这个案例:
搭建好基本的结构
那么此时我想在vue实例组件中使用子组件中的PLanguage的data,显然是不能直接获取到的
所以要使用作用域插槽
首先要定义一个动态属性,和pLanguage绑定起来
现在我想以'='来分割PLanguage中的元素
ES6模块的导入和导出
终于学到新内容了,马上就到webpack了
首先创建了三个文件:
此时在aaa.js中定义了两个变量, 但是我想要在bbb.js中使用这两个变量:
此时,我们在html文件中先导入两这个JS文件, 同时要注意script标签的类型,是模块类型的,这样才不会引起各种问题
那么现在就要将aaa.js中的变量导出,使用export
那自然在bbb.js中就要导入了
import后面跟的是一个大括号,里面的变量名和被导入模块里的名字必须是一致的, export的时候叫什么名字import的时候也要取同样的名字
这个也有另一种写法:
但是此时就会报错:
告诉我们aaa.js中的export需要加上default,因为我们没有使用import{}的语法.
aaa.js文件的export default会输出一个叫default的变量,然后系统允许我们引用时为它取任意名字(aaa)
如果想一次性全部导入:
不需要export default
认识webpack
官方解释:
从本质来说,webpack是一个现代的JavaScript应用的静态模块打包工具
安装webpack
webpack是需要依赖环境的,所以首先要安装node,直接在官网下载就好了,我之前已经安装过了
然后全局安装webpack,这里指定下载版本号3.6.0的,不然后面可能会出问题
开始安装:
npm i webpack@3.6.0 -g
安装得超级慢.....耐心等待吧
局部安装webpack
npm i webpack@3.6.0 --save-dev
使用webpack
初体验:
index.html是源html文件
src有js文件夹,image文件夹,css文件夹,里面是源js,源css和源图片等
main.js是入口文件,在入口文件中引入要用的css文件,js,图片等,打包好以后的文件(bundle.js)在index.html中引用
dist里面放的是打包好以后生成的文件(bundle.js)
我们的math函数,一个非常简单的两位数相加的函数
math.js
在main中的调用
main.js
然后我们只要在终端中输入以下命令:
就可以生成一个bundle文件,它会根据main.js中依赖的模块,将他们全部打包进去,所以不用担心math.js
里面就是这样的,我们不用管它
bundle.js
现在再在index中引入刚刚生成的bundle文件,就能使用了
index.html
使用的结果:
但是每次命令行这么长非常的麻烦,有没有办法能够让我们输入webpack就自动帮我们打包对应的文件到对应的文件夹里呢
首先新建一个文件夹
第一步: 初始化:
npm init -y
很庆幸学了node,到这里能听懂
然后需要在webpack下写一个配置webpack的配置文件,
在配置文件中这样写:
首先下载path这个包, npm i path
webpack.config.js
这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
在配置文件中需要手动指定入口和出口,在任何模块文件内部，可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径
代码语言：javascript复制entry入口，表示，要使用 webpack 打包哪个文件
path指定 打包好的文件，输出到哪个目录中去
filename这是指定 输出的文件的名称
现在只要输入webpack就能自动打包啦,下面这样就是成功了
终端
现在还需要做一个映射,虽然现在看不出作用,但是后期需要,就是我们在终端中输入npm run build实现webpack
需要到package.json中设置一下
这样做是有好处的
我们在终端中直接运行webpack是使用的全局的webpack,而我们修改以后就会优先使用本地的webpack
loader
css-loader
但是我们的文件不止只有JS, 还会有其他格式的文件,比如CSS
现在看看怎么使用吧:
进入官网看一下
选择'样式'
按着步骤来就好了
注意一下安装版本:
npm install --save-dev css-loader@0.28.11
在src下面创建一个CSS文件
给背景一个颜色
normal.css
然后将这个CSS文件在main.js入口文件中引入一下
main.js
和前面的思路是一样的,把CSS文件当成一个模块去使用它,所以也是将它打包到bundle.js中,就可以使用了,但是由于webpack无法打包像css,less之类的文件,无法转换,所以才要使用loader
这个也是要配置的,文档中有写:
但是我们还没下载style-loader,暂时不写
webpack.config.js
现在运行npm run build,打开index.html看看效果
没有任何效果的哈,背景也没变色
这是因为CSS-loader只负责帮忙加载,但是没有解析,style-loader负责将样式添加到DOM中
所以安装一下style-loader:
npm install style-loader@0.23.1 --save-dev
然后进入webpack.config.js进行配置
也许会有个疑问,为什么是先写添加的,再写加载的呢?因为使用多个loader时,是从右向左的.
现在重新npm run build一下,注意只要代码改动了都需要重新run一下才能生效
url-loader
当然我们有时候还会有图片,所以我现在将网页的背景图设置为一张图片,
图片放在src文件下的image文件夹中
normal.css
然后尝试打包
当然会报错,因为我们的webpack只能处理js,报错提示我们需要用合适的loader来处理图片
来到官方文档,不知道为啥跑到资源模块里来了
安装一下:
npm install --save-dev url-loader@1.1.2
官方文档会告诉我们怎么配置,直接复制粘贴就OK了
webpack.congfig.js
修改一下limit限制(我改成了15000)以后,重新run一下再打开文件
file-loader
那如果我的limit设置的太小,run的时候就会报错
意思就是我们缺少一个file-loader,它的机制是这样的,假如我们的图片大小大于了limit的限制,他就会去查找file-loader,所以我们需要安装file-loader
安装:
npm install file-loader@2.0.0 --save-dev
安装完以后run了发现还是报错,此时我们的dist下面多了一张图片,
报错这张图片找不到
因为将图片通过base64进行编译了,所以会多出一张图片,打包的时候要连同这张一起发布,加载的时候应该加载这张编译后的
查看元素后发现它的查找路径有问题:因为这个图片不在这个文件夹的路径下
所以我们要想办法让他的路径变成这样的,图片就能显示出来了
webpack.config.js
再次run一下
这次就成功啦
看弹幕说为什么不把limit设置的非常大,这样就可以不要file-loader了,因为base64处理的图片会没原图那么清晰，所以只适合小图，大图还是用原图好。
但是我们生成的图片的名字很长,是一个32位的哈希值,为了避免重复的.但是在真实开发中,我们可能对打包的名字有一定的要求,比如在所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复
webpack.config.js
注意是写在options里的哈
run一下:
ES6语法处理
我们观察我们的bundle文件,会发现里面还是ES6语法,那么对于一些还支持ES6的浏览器来说,就会出现问题.这个时候需要使用babel
npm install --save-derv babel-loader@7 babel-core babel-preset-es2015
接着还是配置,文档中直接复制就好
webpack.config.js
现在去复习一遍
我在这里说明一下版本的问题:
webpack:
- npm install webpack@3.6.0 -g
- npm install webpack@3.6.0 --save-dev
css-loader:
- npm install --save-dev css-loader@0.28.11
style-loader:
- npm install style-loader@0.23.1 --save-dev
url-loader:
- npm install --save-dev url-loader@1.1.2
file-loader:
- npm install file-loader@2.0.0 --save-dev
babel:
- npm install --save-derv babel-loader@7 babel-core babel-preset-es2015
