VUE项目爬坑---2、在webpack中配置.vue组件页面的解析
一、总结
一句话总结:
1、运行`cnpm i vue -S`将vue安装为运行依赖;
2、运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖;
3、运行`cnpm i style-loader css-loader -D`将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
4、在`webpack.config.js`中,添加如下`module`规则:例如{ test: /.vue$/, use: 'vue-loader' }
1. 运行`cnpm i vue -S`将vue安装为运行依赖;
2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖;
3. 运行`cnpm i style-loader css-loader -D`将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
4. 在`webpack.config.js`中,添加如下`module`规则:
module: {
rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader'] },
{ test: /.vue$/, use: 'vue-loader' }
]
}
1、创建`App.js`组件页面?
vue组件页面包括template、script和style标签
<template> <!-- 注意:在 .vue 的组件中,template 中必须有且只有唯一的根元素进行包裹,一般都用 div 当作唯一的根元素 --> <div> <h1>这是APP组件 - {{msg}}</h1> <h3>我是h3</h3> </div> </template> <script> // 注意:在 .vue 的组件中,通过 script 标签来定义组件的行为,需要使用 ES6 中提供的 export default 方式,导出一个vue实例对象 export default { data() { return { msg: 'OK' } } } </script> <style scoped> h1 { color: red; } </style>
2、使用 饿了么的 MintUI 组件(vue组件)?
a、[MintUI 组件 Github地址](https://github.com/ElemeFE/mint-ui)
b、[Mint-UI官方文档](http://mint-ui.github.io/#!/zh-cn)
3、mui前端库?
和bootstrap一样拷代码的前端库,js代码写的有点low
4、chrome中滑动警告:Unable to preventDefault inside passive event listener due to target being treated as passive?
a、解决方法,可以加上* { touch-action: none; } 这句样式去掉
b、原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西)
滑动的时候报警告:`Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080`
```
解决方法,可以加上* { touch-action: none; } 这句样式去掉。
```
原因:(是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西) http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
5、webpack移除严格模式(因为mui没用严格模式,webpack默认是严格模式)?
babel-plugin-transform-remove-strict-mode
[babel-plugin-transform-remove-strict-mode](https://github.com/genify/babel-plugin-transform-remove-strict-mode)
6、[vue-preview](https://github.com/LS1231/vue-preview)?
一个Vue集成PhotoSwipe图片预览插件
二、内容在总结中
博客对应课程的视频位置: