VUE项目爬坑---2、在webpack中配置.vue组件页面的解析

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图片预览插件

 

 

 

二、内容在总结中

博客对应课程的视频位置：