【项目】UniApp实战多端企业网盘全栈开发 30 引入iview组件库

你的名字 2024-03-22 16:20 40阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  30 引入iview组件库

![在这里插入图片描述][0e2dba436255405ebc26fcfd635a57aa.png_pic_center]

##### 30 引入iview组件库 #####

先将npm 切换淘宝镜像

`npm config set registry https://registry.npm.taobao.org`

![在这里插入图片描述][267bf175a7a04e28a728de2a74095906.png_pic_center]

运行一下就行了

安装命令：`npm install view-design --save`

![在这里插入图片描述][fb5367204ce84988b66470ce58772188.png_pic_center]

![在这里插入图片描述][e199ba44902b495b84559788ebaf45da.png_pic_center]

iview 的官网：[http://iviewui.com/][http_iviewui.com]

![在这里插入图片描述][c46509d2a83a406daadc963ef9ab5f86.png_pic_center]

`main.js`

import Vue from 'vue'
    import App from './App.vue'
    
    import ViewUI from 'view-design';
    import 'view-design/dist/styles/iview.css';
    
    Vue.use(ViewUI);
    
    Vue.config.productionTip = false
    
    new Vue({
        
      render: h => h(App),
    }).$mount('#app')

![在这里插入图片描述][19f5bd011bdd473ca678f227c75f9286.png_pic_center]

随便试一个组件看看效果

`App.vue`

<template>
    	<div id="app">
    		<Button type="primary">Primary</Button>
    	</div>
    </template>
    
    <script>
    	
    
    	export default {
    		name: 'App',
    		components: {
    			
    		}
    	}
    </script>
    
    <style>
    
    </style>

官方文档已经变了

![在这里插入图片描述][16282f550e484d94a8b30211230da790.png_pic_center]

重来一下

[http://v4.iviewui.com/docs/guide/install][http_v4.iviewui.com_docs_guide_install]

![在这里插入图片描述][01f6202b22b840ddb3ebebc52ff42011.png_pic_center]

看这个文档，启动服务

![在这里插入图片描述][91ddb18f39f742e1b54089c4d12b7e2d.png_pic_center]

![在这里插入图片描述][d25d8805fd0744b49acb2a1fe7781fcd.png_pic_center]

没问题。

[0e2dba436255405ebc26fcfd635a57aa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/7d7eaaea86c4479890fee0f4a13b10d3.png
[267bf175a7a04e28a728de2a74095906.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9c5c8edd73084fa082a6faf2b88b15bd.png
[fb5367204ce84988b66470ce58772188.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a4ab714a9a114cdd8afa418f06e35fd1.png
[e199ba44902b495b84559788ebaf45da.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/1a0349a604ca4bd7bddb552c1b5f9ac6.png
[http_iviewui.com]: http://iviewui.com/
[c46509d2a83a406daadc963ef9ab5f86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/03970027cd3b48a0a4bfb74b51545234.png
[19f5bd011bdd473ca678f227c75f9286.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/28d3e684271547d88bc81f9d9090d880.png
[16282f550e484d94a8b30211230da790.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/87efd818866a474583ffa9a3a3820aac.png
[http_v4.iviewui.com_docs_guide_install]: http://v4.iviewui.com/docs/guide/install
[01f6202b22b840ddb3ebebc52ff42011.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/338370ff882f49b2b1254ebe4a317822.png
[91ddb18f39f742e1b54089c4d12b7e2d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/855130a075464e19a6370d7716b646be.png
[d25d8805fd0744b49acb2a1fe7781fcd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4b4e0fb6d0b44f65b91950face76fbf7.png