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

[还好是你。]

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 框架