相关链接

• DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台 App、多端框架
• HBuilderX-高效极客技巧
• uni-app 官网
• Vuetify — A Material Design Framework for Vue.js
• uni-app 项目导入第三方组件库 muse-ui

操作步骤

新建 uni-app 项目

这个我就不多说了，百度上比较详细的步骤一搜一大把，这个不是这篇文章的重点。

下载 vuetify

1. 可以通过 npm install vuetify --save 来下载 vuetify，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 标签，但是有时候效果跟官网的貌似不太一样，控制台有时候还会有报错，可能还需要进行其他操作，目前我还没完全搞明白；

• 有时候复制官网的用例有时候也会有点儿小问题，不过就目前来讲，按钮、卡片、进度条可以使用，其他的由于时间关系还没有来得及试，弄好后第一时间先写博客去了==。