-
创建uni-app项目
![](https://i-blog.csdnimg.cn/blog_migrate/f44a23433faef979b6a0f71ef4e4188c.png)
2.安装uni-app扩展组件
(1)按需引入:找到需要安装的组件(如数字角标)
![](https://i-blog.csdnimg.cn/blog_migrate/5667e77bb1c2127aaf9ac536b04204d3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3076f1b29fba38e6baadcb2070e4cad4.png)
如果遇到导入不了的问题就重装uni_modules插件即可
导入成功的效果
![](https://i-blog.csdnimg.cn/blog_migrate/0642d76d5d2a1c16299932a558f8aa4d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/95bb8188aae5dc68d9b526538f00e321.png)
(2)整个组件导入
![](https://i-blog.csdnimg.cn/blog_migrate/795254f740ae23c7454bd3c37ef5653a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/60deace931cd630d1c0f8286e54c5cf0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bb016f3a223ef6d901ba69272992ba54.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2528aba5e725ca76e1c777ae865beafe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7a5af7c6e5e2014300ab82bd2c489bf2.png)
(3)如果遇到导入不了的问题就重装uni_modules插件即可
![](https://i-blog.csdnimg.cn/blog_migrate/e863d99dfc4d2301b45ca9085a8565fb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d098725ae9f38f182f47980ecc124d3f.png)
(4)使用组件
直接在需要用到组件的地方使用无需再引入
3.安装uView
(1)安装
npm install uview-ui@2.0.31
//版本最好不要太新,不然没效果
// 更新
// npm update uview-ui
![](https://i-blog.csdnimg.cn/blog_migrate/9d96cdaa36916eb7635e4c775ea0bdb6.png)
(2)插件引入
-
在uni.scss文件中引入
@import '@/node_modules/uview-ui/theme.scss';
// 注意确保文件路径正确,安装的时候可能是安装在uni_modules
-
在pages.json文件中
{
"easycom": {//匹配规则
"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
3.在main.js中
import uView from '@/node_modules/uview-ui'//在import Vue from 'vue'下引入uView
Vue.use(uView)
4.在App.vue文件中进行样式的全局挂载
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/node_modules/uview-ui/index.scss";
</style>
5.使用组件
直接在需要用到组件的地方使用无需再引入