嘘~告诉你一个小秘密，Vuetify我教你

菩提前端 2019-08-27

1085

这几天做的项目，一直在用node.js的koa框架和基于Vue的Vuetify组件库，我也跟着发现了一片全新的大陆。

今天我们就来说说vuetify的基础入门~

进入正题：

第一步-装Vue脚手架（如果想要了解更多请去vue官网查看，这里不做更多解释）

npm install @vue.cli -g

第二步-创建Vue项目

vue create my-app

第三步-安装vuetify

当然，如果你已经有了一个实例化的项目，可以使用vue-cli添加vuetify package。

vue add vuetify

下面是你会遇到的一些选项设置

$ ? Choose a preset: (Use arrow keys)
$ > Default (recommended)
$   Prototype (rapid development)
$   Configure (advanced)

‍安装后，你可以在package.json中运行npm开发脚本

Vuetify也可以使用Vue UI安装，Vue UI是@ vue cli的新视觉应用程序。确保安装了最新版本的Vue CLI，然后从终端类型：

// ensure Vue CLI is >= 3.0
$ vue --version


// Then start the UI
$ vue ui

当然可以npm下载安装到node_module中进行使用

npm install vuetify --save

安装完成后，在src目录中创建一个名为plugins的文件夹，添加一个vuetify.js文件，我们将在这里处理引导和设置

第四步-接下来就是引入~

首先安装vuetify-loader

我们在main.js中进行引入

import Vuetify from vuetify/lib


Vue.use(Vuetify)


export default new Vuetify({ ... })

也可以单个引入

import Vue from 'vue'
import Vuetify, {
  VCard,
  VRating,
  VToolbar,
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'


Vue.use(Vuetify, {
  components: {
    VCard,
    VRating,
    VToolbar,
  },
  directives: {
    Ripple,
  },
})


export default new Vuetify({ ... })

还有完全安装的方法

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'


Vue.use(Vuetify)


export default new Vuetify({ ... })

里面是sass文件，所以我们需要添加webpack规则--我们开始一步一步来

从依赖开始

npm install sass sass-loder fiber deepmerge -D

安装完成后，找到您的webpack.config.js文件并将下面的代码段复制到rules数组中。如果您配置了现有的sass规则，则可能需要应用一下或全部更改。如果您还想用vurtify-loader，您可以在A-la-carte上找有关使用webpack进行设置的更多信息。

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          }
        }
      ]
    }
  ]
}

引导Vuetify对象

在src/plugins/vuetify.js
文件中设置初始Vuetify选项后，必须将该对象传递到主Vue实例选项中。此安装过程类似于vue-router和vuex

// src/main.js


import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export


new Vue({
  vuetify,
}).$mount('#app')

还要安装字体（这是最简单的方法）

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

MDI Iconfont

npm install @mdi/font -D

安装软件包后，导入vuetify.js即可

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'


Vue.use(Vuetify)


export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

要在不从Vue CLI安装模板的情况下使用Vuetify.js进行测试，请将以下代码复制到您的index.html
。这将推出最新版本的Vue和Vuetify，让您开始玩组件。您也可以使用Vuetify启动器在codepen上。虽然不推荐，但如果您需要在生产环境中使用cdn软件包，建议您对资产的版本进行范围调整。有关如何执行此操作的更多信息，请导航到jsdelivr 网站。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
</script>
</body>
</html>

vuetify/lib
没有进行编译。对于这些场景，您必须告诉vue-cli转换vuetify
包。这将在将来由vue-cli-plugin-vuetify自动处理，等待vue-cli-3的错误修复。

// vue.config.js


module.exports = {
  transpileDependencies: ['vuetify']
}

支持IE11和Safari 9

Vuetify利用ES2015 2017的功能，需要在Internet Explorer 11和Safari 9/10中使用polyfill 。如果您使用的是Vue CLI 3，则会自动完成此操作。否则，在项目目录中，您可以安装babel-polyfill
：

npm install babel-polyfill --save

建议您将babel-preset-env与相应的polyfill一起使用，以确保只将必要的polyfill添加到您的应用程序中。有关babel-present-env
的更多信息，请访问文档

// src/main.js


import 'babel-polyfill'
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'


new Vue({
  vuetify,
}).$mount('#app')

建议您使用babel-preset-env
相应的polyfill，以确保只将必要的polyfill添加到您的应用程序中。有关更多信息babel-preset-env
，请访问文档

npm install @babel/preset-env -D

由于Internet Explorer对<template>
标签的支持有限。您必须将完全编译后的dom元素发送到浏览器。这可以通过提前构建Vue代码或通过创建辅助组件来替换dom元素来完成。如果你直接发送给IE，通常会导致失败。

// .babelrc
{
  "presets": ["@babel/preset-env"]
}
// babel.config.js


module.exports = {
  presets: ['@babel/preset-env']
}
e.config.js


module.exports = {
  transpileDependencies: ['vuetify']
}

<!-- Vue Component -->


<template v-slot:items="props">
  <td>{‌{ props.item.name }‌}</td>
</template>

数据库

文章转载自菩提前端，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

嘘~告诉你一个小秘密，Vuetify我教你

MDI Iconfont

评论