Vue第六天学习
file-loader(解决webpack打包图片路径问题,字体路径问题)
webpack中 babel 的配置(处理高级的es6语法或者es7语法)
Vue中的render 函数
在 webpack 构建的项目中,使用Vue 进行开发
export default 和 export 的使用方式
结合webpack使用 vue-router
组件中style标签lang属性和scoped属性的介绍
抽离路由模块
一个人如果不想输,就要不断学好眼前的东西,它们将来都会大有用处…
webpack 后续问题
问题:Webpack打包图片路径问题
- 在页面中引入图片有两种方式
- img标签引入
- css引入
解决方案:Webpack使用file-loader处理图片
安装:file-loader 包
- 运行
npm i url-loader file-loader -D
来安装 file-loader 包
- 配置 webpack.config.js 文件
- 运行
npm run dev
file-loader 参数
-
limit
给定的值,是图片的大小,单位是 byte,如果我们引用的 图片,大于 给定的值,则会被转为base64格式 的字符串,如果,图片**小于或等于 **给定的 limit 值,则不会被转为 base64的 字符串
-
name
属性 使图片路径url 不变
处理字体文件 路径问题
使用 file-loader
问题描述:引入bootstrap 字体图标库,但报错!
解决方案:
- 配置 webpack.config.js
{
test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//这是 处理 字体文件的 loader
- 运行
npm run dev
webpack中 babel 的配置
问题描述:
- webpack中默认只能处理一部分es6语法,一些更高级的es6语法或者es7语法webpack处理不了,这时候就需要借助第三方loader帮助webpack处理这些语法
- class是es6中提供的语法,是用来实现es6中面向对象编程的方式,class和static与Java中类似
解决方案:
- 通过 babel 可以将高级语法转化为低级语法
- 安装,运行两个命令,安装两套包,去安装 babel 相关的功能
- 第一套包:
npm i babel-core babel-loader babel-plugin-transform-runtime -D
- 第二套包:
npm i babel-preset-env babel-preset-stage-0 -D
- 第一套包:
- 打开webpack配置文件,在module节点写的rules数组中添加一个新的匹配规则
{
test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
排除node_module目录的原因:
- 如果排除node_module,babel会把node_module目录下的所有第三方js文件都打包编译,这会非常消耗CPU,同时打包速度非常慢
- babel 把node_module中的js文件转化完毕项目也无法正常运行
- 4.在项目的根目录中新建一个叫做 .babelrc 的 babel 配置文件,这个配置文件属于 json格式
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
报错:
**解决方案:**执行 npm i babel-loader@7
报错:
啊啊啊啊~~ 崩溃!!
修改之后还是跑不起来----醉了!!
报错:
升级总结(来自百度)
-babel 升级 7.X 踩坑记录
- babel 包名改变,以前安装是
npm i babel-*
现在安装 babel 系列需要写成npm i @babel/*
.babelrc
文件写法改变,preset plugins
等全部写成@babel/*
的形式
npm:
- babel-preset-env
+ @babel/preset-env
- babel-preset-react
+ @babel/preset-react
- babel-preset-stage-0
.babelrc:
- "presets": ["react", "env", "stage-0", "mobx"]
+ "presets": ["@babel/preset-react", "@babel/preset-env", "mobx"