快速入门

快速入门

让我们从 Vuetify 开始吧，这是世界上最流行的 Vue.js 框架，用于构建功能丰富、快速的应用程序。

Vue CLI 安装

Vue CLI 是下一代 CLI 工具，用于抽离构建应用程序的复杂性。当你用 Vue CLI 启动你的应用程序时，你还可以获得官方的 webpack 更新和配置更改和 Vuetify 的更新，而无需费力地升级程序。

想知道如何使用 Vue CLI，请查阅官方文档

如果你还没有使用 Vue CLI 创建一个新的 Vue.js 项目，你可以输入：

$ vue create my-app
// navigate to new project directory
$ cd my-app

现在你已经实例化了一个项目，你可以使用 cli 添加 Vuetify Vue CLI package 。

$ vue add vuetify

Vue UI 安装

Vuetify 也可通过 Vue UI——Vue CLI 的全新可视化应用程序——进行安装。确保你已安装了最新版的 Vue CLI，在终端上输入：

// ensure Vue CLI is >= 3.0
$ vue --version
// Then start the UI
$ vue ui

Vue UI 启动后会自动在浏览器打开可视化界面，点击屏幕左侧的插件按钮。进入插件页面后，在搜索框中输入 Vuetify 。

安装 Vuetify 插件

Nuxt 安装

可以通过安装 Nuxt Vuetify module 来添加 Vuetify 。

$ yarn add @nuxtjs/vuetify -D
# OR
$ npm install @nuxtjs/vuetify -D

安装之后，更新你的 nuxt.config.js 从而在构建中包含 Vuetify 模块。

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',
    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

更多关于安装 Nuxt 的信息可以在 official documentation。

Webpack 安装

要将 Vuetify 安装到 Webpack 项目，您需要添加几个依赖：

$ yarn add vuetify
// OR
$ npm install vuetify

$ yarn add sass sass-loader fibers deepmerge -D
// OR
$ npm install sass sass-loader fibers deepmerge -D

一旦安装，请找到你的 webpack.config.js 文件，并将下面的片段复制到 rules 。如果已经存在 sass 规则，你可能需要应用下面的一些或所有的更改。如果你希望在 treeshaking 中使用 vuetify-loader ，请确保你的 Webpack 版本 >=4，你可以在 A-la-carte 页面中找到更多关于此项的设置。

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

为 Vuetify 创建一个包含以下内容的插件文件，src/plugins/vuetify.js：

// src/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)

如果使用了 vuetify-loader，请修改为如下代码：

// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)

导航到主入口点，在那里实例化 Vue 实例并将 Vuetify 对象作为选项传递进来。

// src/main.js
import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export
new Vue({
  vuetify,
}).$mount('#app')

字体安装

Vuetify 使用 Google’s Roboto fon 和 Material Design Icons。安装这些软件的最简单方式是将他们的 CDN 包含在你的主 index.html 中。

<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@4.x/css/materialdesignicons.min.css" rel="stylesheet">

使用 CDN

要在不安装 Vue CLI 模板的情况下使用 Vuetify.js 进行测试，请将下面的代码复制到您的 index.html 中。这将拉取最新版本的 Vue 和 Vuetify，从而允许你开始使用组件。您还可以在 codepen 上使用 Vuetify starter 。虽然不建议这样做，但是如果需要在生产环境中使用 cdn，请对包的版本进行范围限定。有关如何做到这一点的更多信息，请浏览 jsdelivr 。

为了使您的应用能正常运行，您必须用 v-app 组件包裹您的应用。请参阅 Application 组件的文档。

<!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@4.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>

结合 Electron

要让 Vuetify 与 Electron 一起使用，请通过 Vue CLI 添加 electron-builder 插件。

# Install
$ vue add electron-builder
# Usage
$ yarn electron:build
$ yarn electron:serve

结合 PWA

如果您使用 Vue CLI 创建新项目，在 vue create my-app 提供的选项中您可以选择 Progressive Web App (PWA) Support 。对于已经存在的 Vue CLI 项目，您可以通过如下命令安装该依赖库。

$ vue add pwa

结合 Cordova

要将 Vuetify 与 Cordova 一起使用，请通过 Vue CLI 添加 Cordova 插件。

# If cordova is not already installed
$ npm install -g cordova
# Install
$ vue add cordova
# Usage
$ yarn cordova-serve-android # Development Android
$ yarn cordova-build-android # Build Android
$ yarn cordova-serve-ios # Development IOS
$ yarn cordova-build-ios # Build IOS
$ yarn cordova-serve-browser # Development Browser
$ yarn cordova-build-browser # Build Browser

结合 Capacitor

想要在 Capacitor 中使用 Vuetify，请先安装 Vue CLI 插件 Capacitor 。

# Install
$ vue add @nklayman/capacitor
# Usage
$ yarn capacitor:serve

Looking for Web Developer jobs? Try Jooble

快速开始