CDN Install
To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your
index.html. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components.<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app>
<main>
<v-container>Hello world</v-container>
</main>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script>
new Vue({ el: '#app' })
</script>
</body>
</html>
content_copy
New applications
Vuetify has 8 pre-made Vue CLI templates, 3 which are forked from official Vue.js templates. They contain small modifications to help you get started with Vuetify even faster. These packages require
vue-cli. For more information on vue-cli, visit the official Github repository. These templates are designed to get you started as fast as possible with your next projectExisting applications
To include Vuetify into an existing project, you must pull it into your node_modules. You can use either
npm or yarn
to accomplish this task. These are both package managers that allow you
to control what resources are available to your application.
For a detailed explanation of how to get
npm running in your environment, check out the official documentation. Alternatively, if you wish to use yarn, you can find the official documentation here. Once setup, you can run either command from your command prompt.$ npm install vuetify
# or
$ yarn add vuetify
content_copy
Once Vuetify has been installed, navigate to your applications main entry point. In most cases this will be
index.js or main.js. In this file you will import Vuetify and tell Vue to use it.import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
content_copy
You will also need to include the Vuetify css file. Simply include the Vuetify css file in your
index.html or import the actual stylus file or the minified css.// index.js or main.js
import('path/to/node_modules/vuetify/dist/vuetify.min.css') // Ensure you are using css-loader
content_copy
// main.styl
@import 'path/to/node_modules/vuetify/src/stylus/main.styl' // Ensure you are using stylus-loader
content_copy
The easiest way to include the Material Design icons is to add a
link tag to your index.html file.<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>
content_copy
warning
Warning:
While Vuetify attempts to not cause any css collision as much as
possible, there is no guarantee that your custom styles will not alter
your experience when integrating this framework into your existing
project.
Support Browsers
Vuetify.js
is a progressive framework that attempts to push web development to the
next level. In order to best accomplish this task, some sacrifices had
to be made in terms of support for older versions of Internet Explorer.
Internet Explorer 11 Support
To use Vuetify.js with Internet Explorer, you must include a polyfill in your project. Vuetify.js can work with either polyfill.io or babel-polyfill.
The polyfill must be loaded before your project source code. Other
polyfills may be needed to use specific features in your project.
Due to Internet Explorer's limited support for
<template>
tags, you must take care to send fully compiled dom elements to the
browser. This can be done by either building your Vue code in advance or
by creating helper components to replace the dom elements. For
instance, if sent directly to IE, this will fail:<template slot="items" scope="props">
<td>{{ props.item.name }}</td>
</template>
content_copy
Using a custom component, in this example
<cell>, we could use this markup:<!--Example component declaration-->
Vue.component('cell', { template: '<td><slot></slot></td>' });
<!--Example scoped slot-->
<template slot="items" scope="props">
<cell>{{ props.item.name }}</cell>
</template> Sumber : https://vuetifyjs.com/vuetify/quick-start 
Tidak ada komentar:
Posting Komentar