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

html-css016

vue.js怎么引入material.css之类的ui库,第1张

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

传统的方式是直接引入 .css 文件,如:<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />,但是我现在想让 Angular 通过 import 模块的方式自动为 index.html 引入 normalize.css 样式表。

我先是按照之前引入 Material 2 的方式:

// angular-cli-build.js

module.exports = function(defaults) {

return new Angular2App(defaults, {

vendorNpmFiles: [

'normalize-path/index.js',

]

})

}

// system-config.ts

const map: any = {

'normalize': 'vendor/normalize-path',

}

/** User packages configuration. */

const packages: any = {

'normalize': {main: 'index.js'},

}

// app.component.ts

import { normalize } from 'normalize-path'

这时编辑器会提示:

Cannot find module 'normalize-path'.

并且编译也不通过,也许我的出发点是错的。

9个流行的、强大的前端开源框架,帮助你轻松构建漂亮的网站前端。1、BootstrapBootstrap无疑是最流行的CSS框架,它是最早的Web前端框架,由Twitter开发。Bootstrap还提供了许多示例来帮助你入门。2、PatternFlyPatternFly是Red Hat的开源CSS框架,和Bootstrap不同的是,Bootstrap是为那些想要创建漂亮网站的人而设计的,而PatternFly主要专注于企业应用程序开发人员,提供诸如条形图、图表、导航之类的组件,实际上Red Hat就是使用它创建了OpenShift。3、Material Components for the webMaterial Components for the web(MDC Web),是谷歌专为Web设计的全新前端框架。MDC Web可帮助开发人员执行Material Design,组件由谷歌的核心工程师团队和UX设计人员开发。这些组件可以建立可靠的开发工作流程,以构建美观且功能强大的Web项目。4、PureBootstrap,Patternfly和MDC Web是功能非常强大的CSS框架,但它们可能非常繁琐和复杂。如果你想要一个轻量级的CSS框架,可以尝试Pure.css,它本身更接近于CSS编程,但又可以帮助你构建一个不错的网页。Pure是具有最小占用空间的轻量级CSS框架,它由Yahoo开发,根据BSD许可是开源的。5、FoundationFoundation声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司,组织都使用该框架,并且该框架具有大量可用的文档。6、BulmaBulma是一个基于Flexbox的开源框架,可根据MIT许可证开源。Bulma是一个非常轻量级的框架,因为它只需要一个CSS文件。Bulma拥有简洁明了的文档,可轻松选择你想要的主题。它还具有许多Web组件,你可以在设计中使用它们。7、Skeleton如果说还有什么框架比Pure更加轻量级,那一定是Skeleton。Skeleton库只有大约400行,并且该框架仅提供一些基本的CSS框架组件。尽管如此,Skeleton还是提供了详细的文档来帮助你快速上手。8、MaterializeMaterialize 是一个基于 Material Design风格的一个现代化的响应式前端框架,解决了最繁重的工作,结合你的自定义组件,为你提供默认的样式。Materialize的文档页面非常全面,并且很容易遵循。其组件页面包括按钮,卡片,导航等。9、BootflatBootflat是从Twitter的Bootstrap派生的开源CSS框架。与Bootstrap相比,Bootflat更简单,并且更加轻量级。Bootflat的文档似乎几乎受到了IKEA的启发,大部分都是图像,没有太多的文字。