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:防止样式设置是全局的,避免子组件中的样式设置时导致父组件的样式也改变