zoukankan      html  css  js  c++  java
  • 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图片预览插件

    二、内容在总结中

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

     
  • 相关阅读:
    null in ABAP and nullpointer in Java
    SAP ABAP SM50事务码和Hybris Commerce的线程管理器
    Hybris service layer和SAP CRM WebClient UI架构的横向比较
    SAP ABAP和Linux系统里如何检查网络传输的数据量
    SAP CRM WebClient UI和Hybris的controller是如何被调用的
    SAP CRM和Cloud for Customer订单中的业务伙伴的自动决定机制
    SAP CRM WebClient UI和Hybris CommerceUI tag的渲染逻辑
    SAP BSP和JSP页面里UI元素的ID生成逻辑
    微信jsapi支付
    微信jsapi退款操作
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12779516.html
Copyright © 2011-2022 走看看