前端学习 --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的配置



问题：
（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 babel-loader@7.1.4 -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：使用标签去渲染组件

（2）render方法渲染组件，它会直接代替#app去显示，导致#app里的内容显示不出来；并且会导致一个#app中只能由一个组件

6、区分webpack中导入vue和普通网页使用script导入Vue的区别：
注意点：版本问题（webpack 3.x 版本 vue-loader版本）

webpack中导入vue（步骤）：
安装：npm i vue -S

利用<script>标签引入的包是功能齐全的

7、在vue中结合render函数渲染指定的组件到容器中

如果使用import Vue from ‘…/node_modules/vue/dist/vue’，则可以直接在components中定义组件
components:{
// login
// }

8、export default 和export 的使用方式

node.js向外暴露和引用外部文件

ES6向外暴露和引用外部文件



在main.js中调用暴露成员：

9、结合webpack使用vue-router

10、结合webpack实现children子路由、组件中style标签lang属性和scoped属性的介绍
vue插件（自选择安装）：


scoped：防止样式设置是全局的，避免子组件中的样式设置时导致父组件的样式也改变