vue.js怎么引入material.css之类的ui库

发布网友发布时间：2022-04-25 21:49

我来回答

共2个回答

懂视网时间：2022-04-18 05:05

Vue Material 是一个轻量级的框架，建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。

vue material是一个实现Google像素材料设计的Vue组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的API也简单明了。

你可以动态地生成和使用主题，根据自己的需求只用组件，UI元素与组件的优势在于可以更简单的使用API和其他的。

它提供一组可重用的组件和一系列的UI元素，使用 Vue 2.0 建立支持主流的浏览器的应用。

官网：http://vuematerial.materializecss.cn/#/

安装方法

引入 Roboto 和谷歌 Icons 从谷歌 CDN:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

通过 npm 或 yarn 来安装 Vue Material

npm install vue-material
yarn add vue-material

* 其他包管理，比如 JSPM 和 Bower 暂不支持。

或从Github 下载脚本和样式并引入到HTML中:（下载地址https://github.com/marcosmoura/vue-material/archive/master.zip）

<link rel="stylesheet" href="path/to/vue-material.css">
<script src="path/to/vue-material.js"></script>

用法

启用 Vue Material 在你的应用中通过 Vue.use()。您也可以单个单个的启用组件:

// To import the whole library
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

Vue.use(VueMaterial)

// Or to import individual components
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material
import 'vue-material/dist/components/mdButton/index.css'
import 'vue-material/dist/components/mdIcon/index.css'
import 'vue-material/dist/components/mdSidenav/index.css'
import 'vue-material/dist/components/mdToolbar/index.css'

Vue.use(VueMaterial.mdCore) //Required to boot vue material
Vue.use(VueMaterial.mdButton)
Vue.use(VueMaterial.mdIcon)
Vue.use(VueMaterial.mdSidenav)
Vue.use(VueMaterial.mdToolbar)

应用主题

为了让 Vue Material 正常工作，你需要配置一个默认的主题。你也可以一次性注册多个主题。

单个主题

Vue.material.theme.register('default', {
 primary: 'cyan',
 accent: 'pink'
})

多个主题

Vue.material.theme.registerAll({
 default: {
 primary: 'cyan',
 accent: 'pink'
 },
 indigo: {
 primary: 'indigo',
 accent: 'pink'
 }
})

应用你的主题到每一部分代码，你需要使用 v-md-theme 指令:

<div id="app" v-md-theme="'default'">
 <md-toolbar>
 <div class="md-title">My App</div>
 </md-toolbar>
 <md-button v-md-theme="'indigo'">My Button</md-button>
</div>

热心网友时间：2022-04-18 02:13

vue.js引入material.css之类的ui库

用vue-cli创建以webpack为模版的项目，npm install material-css，然后怎么配置才可以使用呢
看你需求了，
第一种全局引入，在main.js中写路径import '../css/xxx.css';
第二种组件中引入，在组件中的style标签写@import '../css/xxx.css';
如果只是纯css的话，直接在main.js里面
import 'XXX.css'

应该就可以了吧
没用过你说的material-css，不过github的readme应该有讲npm之后要怎样用吧？
通常要么是全局引用，在根组件require并vue.use；要么是支持局部引用，在需要的组件里require，在components里面声明。
CMD
require('!style!css!material-css/material-css.css');

如果是在全局都使用的话可以在index.html中引入这个文件，如果是在组件中使用，可以用import xx.css

全部栏目

vue.js怎么引入material.css之类的ui库