# 相关链接 - [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项目不太一样；  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> ``` ## 运行截图  # 注意 - **我的这种方法虽然可以正常使用 `<v-app></v-app>` 等vuetify标签，但是有时候效果跟官网的貌似不太一样，控制台有时候还会有报错，可能还需要进行其他操作，目前我还没完全搞明白；** - **有时候复制官网的用例有时候也会有点儿小问题，不过就目前来讲，按钮、卡片、进度条可以使用，其他的由于时间关系还没有来得及试，弄好后第一时间先写博客去了==。**