uniapp搭建项目架构

1. 打开HBuilderX新建项目

选择项目模板以及版本

2. UI框架的安装配置

UI框架选择的是uView

（1）安装依赖包

npm i uview-ui@2.0.31 -S

安装的时候可能会报错

如果根目录没有package.json的话需要初始化下npm

npm init -y

！！！此框架依赖的sass 如果HbuilderX没有安装sass插件,需要手动安装sass sass-loader

（2）项目中引入

引入uView主要JS模块在main.js中，注意这两行要放在import Vue之后

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

引入uView全局SCSS主题文件 在uni.scss中，

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

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

@import "uview-ui/index.scss";

在pages.json中配置自动引入组件模式

{
    // 配置自动引入组件模式
     "easycom": {
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        },
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
}