在vscode中创建vue +uniapp+ts+colorui+部分uni-ui项目

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.分包