1、新建文件夹打开cmd 或者用vscode打开终端也行,直接命令行创建
vue create -p dcloudio/uni-preset-vue my-ts-uni
2.选择 默认模板(TypeScript),就会生成vue+uniapp+ts
3.vscode打开新建的my-ts-uni 或者cd my-ts-ui
打开文件
4.引入color ui (因为习惯用了所以colorui全局配置,uni-ui按需引入)
(1)直接下载colorui文件下载放入src目录下面(https://www.color-ui.com)
(2)main.ts 引入
import cuCustom from 'colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
(3)app.vue引入
onLaunch() {
uni.getSystemInfo({
//配置colorui顶部导航栏的高度
success: function (e: any) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == "android") {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
}
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar =
custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
},
});
}
@import "colorui/main.css";
@import "colorui/icon.css";
(4)使用(具体可以直接打开colorui项目按照示例,按需复制粘贴)
<view style="background-color: #06cb7c; color: #fff">
<cu-custom bgColor="bg-olive" isBack="true">
<block slot="backText">返回</block>
<block slot="content">标题</block>
</cu-custom>
</view>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
5.按需引入uni-ui(官网:https://uniapp.dcloud.net.cn/component/uniui/quickstart.html)
(1) 安装 sass
npm i sass -D 或 yarn add sass -D
(2)安装 sass-loader
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
(3)如果需要全局安装(没全局安装过官网有写)
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
pages.json配置
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
6.用了vue-property-decorator
8.安装postcss
npm add postcss-comment postcss-import postcss-nested postcss-preset-env
9.分包