Vuetify

商店

企业版

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

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

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

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

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

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

安装 Vuetify 插件

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

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

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

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

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

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

如果使用了 vuetify-loader,请修改为如下代码:

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

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

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

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

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

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

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

There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN:

Looking for Web Developer jobs? Try Jooble
Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!