通过cli方式创建Uni-App项目踩坑日记

1 如何安装使用sass和sass-loader ？

安装sass和node-sass，sass-loader 请使用低于 @11.0.0 的版本，[email protected] 不支持 [email protected]

安装完成即可使用，无需webpack配置。

2 如何使用uni-ui？

  2-1 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：

    // 在根目录创建 vue.config.js 文件，并配置如下

    module.exports = {

      transpileDependencies: ['@dcloudio/uni-ui']

    }

  2-2 使用 npm + easycom

    打开项目根目录下的 pages.json 并添加 easycom 节点：    

// pages.json

    {

      "easycom": {

        "autoscan": true,

        "custom": {

          // uni-ui 规则如下配置

          "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"

        }

      },

      // 其他内容

      pages:[

        // ...

      ]

    }

--from [uni-ui文档]

3 修改uni-ui组件，在自定义组件里，发现无法使用/deep/穿透修改uni-ui组件样式？

  1 创建style标签，不使用scoped，在h5可以修改，小程序不生效

  2 可以在页面组件的style里，用/deep/穿透，可以生效

如  page.vue是一个页面，
    comp.vue是一个组件且里面使用了uni-ui组件，需要修改uni-ui组件样式

可以在page.vue里的里用/deep/穿透uni-ui组件，修改样式即可生效
（目前在comp.vue里则不行，有点奇怪，估计官方还没兼容）

  3 通过hbuild创建的uniapp项目可以在自定义组件里，通过/deep/修改uni-ui组件的样式