前端学习 --Vue.js Day6

1、webpack中url-loader的使用
安装:cnpm i url-loader file-loader -D
在这里插入图片描述

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

在这里插入图片描述
[name]=[hash:8]-[name]:图片名字 = 8位的哈希值-原来图片的名字
.[ext]:图片的后缀
2、webpack中url-loader处理字体文件
安装:cnpm i bootstrap -S
在这里插入图片描述
main.js:

import 'bootstrap/dist/css/bootstrap.css'

webpack.config.js:

//处理字体路径的第三方loader规则
{test:/.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}

3、关于webpack和npm 中几个问题的说明:
.json文件不能写注释

4、webpack中babel的配置
前端学习 --Vue.js Day6_第1张图片
前端学习 --Vue.js Day6_第2张图片
前端学习 --Vue.js Day6_第3张图片
问题:
(1)A complete log of this run can be found in
(2)If you’d like to use Babel 6.x (‘babel-core’), you should install ‘babel-loader@7’.(
如果您想使用Babel 6.x(“babel-core”),则应该安装“babel-loader@7”。)
(3) Invalid Host/Origin header error
(4) console.log(Person.info) 一直没有出来是因为少安装了这个插件 “babel-runtime”: “^6.26.0”,

解决:
(1)全局更新 :npm install npm -g 或者用淘宝镜像命令 :cnpm install npm -g
https://blog.csdn.net/ldb987/article/details/80342993
(2)安装babel-loader7.x版本 cnpm i [email protected] -D
(3)module.exports = { //https://www.v2ex.com/t/519971
// webpack-dev-server 的配置项
devServer: {
host: ‘0.0.0.0’
// disableHostCheck: true
}
}
(4)cnpm i babel-runtime -D https://www.cnblogs.com/load100/p/9304439.html

5、使用vue实例的render方法渲染组件
(1)方法1:使用标签去渲染组件
前端学习 --Vue.js Day6_第4张图片
(2)render方法渲染组件,它会直接代替#app去显示,导致#app里的内容显示不出来;并且会导致一个#app中只能由一个组件
前端学习 --Vue.js Day6_第5张图片
6、区分webpack中导入vue和普通网页使用script导入Vue的区别:
注意点:版本问题(webpack 3.x 版本 vue-loader版本)
前端学习 --Vue.js Day6_第6张图片
webpack中导入vue(步骤):
安装:npm i vue -S
在这里插入图片描述

利用
                    
                    

你可能感兴趣的:(前端学习)