推荐一个漂亮的vue Material Design风格的组件库

2,586 阅读1分钟
原文链接: vuetifyjs.com

Existing 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 vuetifyOnce 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)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// main.styl @import 'path/to/node_modules/vuetify/src/stylus/main.styl' // Ensure you are using stylus-loader  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>warningWarning: 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.