HbuilderX+uniapp项目-基础配置

一.什么是Uniapp

官网:官网介绍

二.开发工具-Hbuilder

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

三.开始项目

1)文件--新建--项目

2)选择 uniapp项目

3)vue版本为2, 默认模版

四.如何运行

不过多介绍:如何运行uniapp项目

五.pages.json文件--配置页面路径

与小程序相似:pages.json 页面路由 | uni-app官网

六.引入ui组件库

1.引入 uni-ui 扩展组件

组件地址:uni-ui扩展组件

这里我们运用的默认模版,采用通过 uni_modules 单独安装组件(用到哪个导入哪个)

举例: 使用uni-ui的卡片 顶部 点击下载安装 点击下载插件zip (需要登录HbuilderX账号)

项目根目录创建文件夹uni_modules,解压后的文件 移动到uni_modules里

*注意: 有的文章 写的是 只需要把解压后的文件夹下面的components下的文件夹移入进去,亲测无效

2.引入Uview组件库(官方推荐)

网址:uview网址

同样与上方方式大致一样 下载插件 将下载好的文件 移动到根目录 插件地址

接下来就是配置:

1. main.js文件 注意这两行要放在import Vue之后。

// 引入:uView-UI
import uView from '@/uview-ui'
Vue.use(uView)

2. 根目录uni.scss

@import "uview-ui/theme.scss";//引入uView的全局SCSS主题文件

 3.App.vue

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

4.pages.json 

*注意: uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能

*注意: 如果您是通过uni_modules形式引入uView，可以忽略此配置

"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

3.引入ColorUI(官方推荐)

官方文档:ColorUI   使用方法:使用教程  插件地址:插件地址 (需要看广告666)

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。

使用:下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录

配置:  自己看文档 写的很清楚:使用教程 

使用方法: 找到对应元素 审查元素给样式 或者 下载官方demo运行,找到对应位置进行复制

七:完成--书写代码