官网:官网介绍
HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。
1)文件--新建--项目
2)选择 uniapp项目
3)vue版本为2, 默认模版
不过多介绍:如何运行uniapp项目
与小程序相似:pages.json 页面路由 | uni-app官网
组件地址:uni-ui扩展组件
这里我们运用的默认模版,采用通过 uni_modules 单独安装组件(用到哪个导入哪个)
举例: 使用uni-ui的卡片 顶部 点击下载安装 点击下载插件zip (需要登录HbuilderX账号)
项目根目录创建文件夹uni_modules,解压后的文件 移动到uni_modules里
*注意: 有的文章 写的是 只需要把解压后的文件夹下面的components下的文件夹移入进去,亲测无效
网址: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"
},
官方文档:ColorUI 使用方法:使用教程 插件地址:插件地址 (需要看广告666)
ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。
使用:下载源码解压获得/Colorui-UniApp文件夹,复制目录下的 /colorui 文件夹到你的项目根目录
配置: 自己看文档 写的很清楚:使用教程
使用方法: 找到对应元素 审查元素给样式 或者 下载官方demo运行,找到对应位置进行复制