在前面的《[uniapp应用组件安装与卸载](https://www.junlan365.com/show/id/79.html "uniapp应用组件安装与卸载")》中讲了uniapp应用组件后端的安装与卸载,接下来讲的是uniapp前端的安装。
**uniapp的目录结构**
~~~
uniappJL 项目部署目录
├─common 应用目录
│ ├─util.js 函数库
│ ├─ ... 更多函数库
├─components 子组件目录
│
│ ├─uni-badge uni-badge组件目录
│ │ └─uni-badge.vue 组件文件
│ ├─... 更多组件
│
├─pages 组件目录
│ ├─index index组件目录
│ │ └─index.vue index组件文件
│ └─ ...
│
├─uni_modules 插件目录
│ ├─u-clipboard 插件
│ └─...
│
├─pages.json pages.json配置文件
~~~
现在要安装vip应用组件,在组件包中找到uniappJL,打开会看到如下文件夹
~~~
uniappJL 项目部署目录
├─pages
│ └─user
│ └─vip
│ ├─equity.vue
│ ├─myVipOrder.vue
│ └─vip.vue
~~~
把uniappJL覆盖你的uniapp项目即可(覆盖前请先作好备份)
**注册文件路径到pages.json配置文件**
在uniappJL中找到pages.json配置文件,添加上如下配置信息
~~~
{
"pages": [
{
"path": "pages/user/vip/vip",
},
{
"path": "pages/user/vip/myVipOrder",
},
{
"path": "pages/user/vip/equity.vue",
}
]
}
~~~
至此,vip应用组件就安装好了。当然文件的位置可以随便更改,只要符合uniapp官方文档的开发规范即可。