OR博客
【uni-app】——引入vuetify组件库
OrdinaryRoad
创建于:2020-12-01 16:34:00
0
18
169
0
几个月前遇到的问题,如何在uni-app中引入并使用vuetify,几个月前试了试,没搞好,就一直没管了,百度上找不到这个问题,可能是我搜索姿势不太对,或者途径不太对吧。今天突然想弄一下,没想到居然成功了一大半。
# 相关链接 - [DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架](https://www.dcloud.io/ "DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架") - [HBuilderX-高效极客技巧](https://www.dcloud.io/hbuilderx.html "HBuilderX-高效极客技巧") - [uni-app官网](https://uniapp.dcloud.io/ "uni-app官网") - [Vuetify — A Material Design Framework for Vue.js](https://vuetifyjs.com/zh-Hans/ "Vuetify — A Material Design Framework for Vue.js") - [uni-app项目导入第三方组件库muse-ui](https://www.cnblogs.com/murenziwei/p/10885355.html "uni-app项目导入第三方组件库muse-ui") # 操作步骤 ## 新建uni-app项目 这个我就不多说了,百度上比较详细的步骤一搜一大把,这个不是这篇文章的重点。 ## 下载vuetify 1. 可以通过 `npm install vuetify --save` 来下载vuetify,[vuetify官网有详细的安装步骤](https://vuetifyjs.com/zh-Hans/getting-started/installation/ "vuetify官网有详细的安装步骤"); 2. 然后只需要将 `vuetify` 文件夹整个复制到uniapp根目录下,其他 `install` 自动生成的 `node_moudles、packxxx-lock.json` 啥的都可以删除,因为uni-app的项目结构与vue项目不太一样; ![粘贴vuetify文件夹后](https://api.ordinaryroad.tech/upms/file/download/ordinaryroad-blog/before-refactor/picture/720e675d3b3d4296ba20432979b80eea6755/粘贴vuetify文件夹后.png "粘贴vuetify文件夹后") 3. 根据vuetify官网的安装提示,创建 `plugins/vuetify.js` 文件并在 `main.js` 中引入vuetify; 3.1 为 Vuetify 创建一个插件文件,plugins/vuetify.js,内容如下: ``` // plugins/vuetify.js import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) const opts = {} export default new Vuetify(opts) ``` 3.2 导航到主入口点,在那里实例化 Vue 实例并将 Vuetify 对象作为选项传递进来。 ``` import Vue from 'vue' import App from './App' import vuetify from '@/plugins/vuetify' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ vuetify, ...App }) app.$mount() ``` 4. 在 `App.vue` 中的 `<style></style>` 中引入vuetify默认的字体和图标; ``` <script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } </script> <style> /*每个页面公共css */ @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"); @import url("https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"); </style> ``` 5. 在其他vue文件中使用vuetify。 ``` <template> <v-app> <view class="content"> <image class="logo" src="/static/logo.png"></image> <view class="text-area"> <text class="title">{{title}}</text> </view> <v-btn @click="clickButton" color="primary">按钮</v-btn> </view> </v-app> </template> <script> export default { data() { return { title: 'Hello Uniapp Vuetify' } }, onLoad() { }, methods: { clickButton: (() => { console.log("clickButton") }) } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style> ``` ## 运行截图 ![运行截图](https://api.ordinaryroad.tech/upms/file/download/ordinaryroad-blog/before-refactor/picture/720e675d3b3d4296ba20432979b80eea6755/运行截图.png "运行截图") # 注意 - **我的这种方法虽然可以正常使用 `<v-app></v-app>` 等vuetify标签,但是有时候效果跟官网的貌似不太一样,控制台有时候还会有报错,可能还需要进行其他操作,目前我还没完全搞明白;** - **有时候复制官网的用例有时候也会有点儿小问题,不过就目前来讲,按钮、卡片、进度条可以使用,其他的由于时间关系还没有来得及试,弄好后第一时间先写博客去了==。**
评论
楼主暂时不想被别人评论哦~