安装uni-app框架开发工具:HBuilderX_讨论帖

还好是你。 2022-11-20 15:49:53

uni-app生态UI框架 uView UI

安装教程(uView UI 1.x)

  • 安装 HBuilderX 开发工具
  • 创建uni-app项目
    打开 HBuilderX 开发工具,新建uni-app项目,使用“默认模板”
  • npm包管理器下载 uView UI
    需安装Node.js语言开发环境,npm -v查看版本号
    打开 HBuilderX 开发工具的终端输入下方示例代码,下载 uView ui 框架文件。
    // 如果您的项目是 HBuilderX 创建的,根目录又没有 package.json 文件的话,请先执行如下命令:
    // npm init -y
    // 安装
    npm install uview-ui@1.x
    
  • 配置 uView ui 框架
  1. 引入 uView 主JS库
    项目根目录中的 main.js 中,引入并使用 uView 的JS库,注意要放在 import Vue 后。
    import uView from "uview-ui";
    Vue.use(uView);
    
  2. 引入 uView 的全局SCSS主题文件
    在项目根目录的 uni.scss 中引入此文件
    @import 'uview-ui/theme.scss';
    
  3. 引入 uView 基础样式
    注意: 因为 uView ui 使用了 scss 做为 css 的扩展语言,所以需要在 HBuilderX 开发工具中安装 scss 插件。步骤:HBuilderX 开发工具菜单栏“工具” >“插件安装”>“前往插件市场安装”>“搜索找到 sass”>“使用 HBuilderX 导入插件”
    在APP.vue首行引入,注意给 style 标签加入 lang=“scss” 属性
    <style lang="scss">
     /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
     @import "uview-ui/index.scss";
    </style>
    
  4. 配置 easycom 组件模式
    此配置需在 pages.json 中进行
    {
     "easycom": {
         "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
     },
     // 此为本身已有的内容
     "pages": [
         // ......
     ]
    }
    
  • 使用 uView ui 框架
...全文
120 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

1

社区成员

发帖
与我相关
我的任务
社区管理员
  • community_2516
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧