如何高效利用uniapp开发小程序，积累实战经验？

本文共计699个文字，预计阅读时间需要3分钟。

1. 新建UI项目，首先，我们的UI基于ColorUI，当ColorUI没有所需样式时，则基于Uniapp自带的UI。因此，项目开始时需引入这两个UI框架。+ 创建uni-ui项目。+ 创建ColorUI项目。

1. 新建UI项目

首先，我们的UI是基于ColorUI，当ColorUI没有的样式，就基于Uniapp自带的UI。所以项目的开始要引入这两个UI框架。
如下，新建一个uni-ui项目。

再建立一个ColorUI项目。

如果需要观看ColorUI的效果以便直到自己需要用哪些组件，可以将其运行起来，如下。

uni-ui同理。这样只要我们需要的样式都可以在这两个UI取材了。

2. 搭建自己的项目

新建一个自己的uniapp项目，建立完成后。项目结构如下。

接着先引入ColorUI样式:

• 将ColorUI项目下的colorui目录，拷贝到自己项目的根目录下。
• 在自己项目根目录的App.vue文件下引入两个css文件，如下

<style> /*每个页面公共css */ @import "colorui/main.css"; @import "colorui/icon.css"; </style>

• 需要哪个样式，可以到ColorUI项目下审查元素，拷贝对应的class即可。