使用HBuilderX新建uniapp项目使用uview框架

新建项目

1. 在HBuilderX中新建项目
   
   
   
2. 使用uview插件

使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装

本文介绍npm安装方式

• 根目录没有package.json文件的话，打开终端，执行npm init -y命令，安装package.json
  
• 执行命令npm install uview-ui@2.0.31
  

接下来是npm方式安装的配置

• uView依赖SCSS，您必须要安装此插件，否则无法正常运行。已安装，略过！

菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装

配置步骤

1. 引入uView主JS库

注意这两行要放在import Vue之后。
// main.js
import uView from “uview-ui”;
Vue.use(uView);

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

项目src目录的uni.scss中引入此文件
/* uni.scss */
@import ‘uview-ui/theme.scss’;

3.引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import “uview-ui/index.scss”;

4. 配置easycom组件模式 src目录的pages.json中进行

// pages.json
{
“easycom”: {
“^u-(.*)”: “uview-ui/components/u-$1/u-$1.vue”
},
// 此为本身已有的内容
“pages”: [
// …
]
}