• 关于SCSS
  • 准备工作
  • 配置步骤
    • # 1. 引入uView主JS库"># 1. 引入uView主JS库
    • # 2. 在引入uView的全局SCSS主题文件"># 2. 在引入uView的全局SCSS主题文件
    • # 3. 引入uView基础样式"># 3. 引入uView基础样式
    • # 4. 配置easycom组件模式"># 4. 配置easycom组件模式

    官网搬运https://www.uviewui.com/components/npmSetting.html

    关于SCSS

    uView依赖SCSS,您必须要安装此插件,否则无法正常运行。
    如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到”scss/sass编译”插件进行安装, 如不生效,重启HX即可
    如果您的项目是由vue-cli创建的,请通过以下命令安装对sass(scss)的支持,如果已安装,请略过。

    1. // 安装node-sass npm i node-sass -D
    2. // 安装sass-loader npm i sass-loader -D
    3. 安装低版本sass
    4. npm install sass-loader@7.3.1 --save-dev
    5. npm install node-sass@4.14.1 --save-dev

    准备工作

    在进行配置之前,请确保您已经根据安装中的步骤对uView进行了npm安装,如果没有,请先执行安装:
    // 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:

    1. // npm init -y
    2. // 安装 npm install uview-ui

    配置步骤

    # 1. 引入uView主JS库

    在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。
    // main.js

    1. import uView from "uview-ui";
    2. Vue.use(uView);

    # 2. 在引入uView的全局SCSS主题文件

    在项目根目录的uni.scss中引入此文件。
    / uni.scss /

    1. @import 'uview-ui/theme.scss';

    # 3. 引入uView基础样式

    注意!
    在App.vue中首行的位置引入,注意给style标签加入lang=”scss”属性

    1. <style lang="scss">
    2. /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    3. @import "uview-ui/index.scss";
    4. </style>

    # 4. 配置easycom组件模式

    此配置需要在项目根目录的pages.json中进行。
    温馨提示

    1. uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
    2. 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

    // pages.json

    1. // pages.json
    2. {
    3. "easycom": {
    4. "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    5. },
    6. // 此为本身已有的内容
    7. "pages": [
    8. // ......
    9. ]
    10. }