webpack: 使用自己写样式

main.js导入全局生效

import Vue from 'vue'
import App from './App.vue' import './index.css' new Vue({
el: '#app',
render: c => c(App)
});

index.css:

body {
color: darkred;
}

App.vue

<template>
<div>
<h1>这是 App 组件</h1>
</div>
</template> <script>
export default {
name: 'App',
};
</script> <style scoped>
</style>

优先级: 自己的> 全局的

login.vue

<template>
<div>login</div>
</template> <script> export default {
name: "login"
}
</script> <style scoped>
div{
color: antiquewhite;
}
</style>

App.vue

<template>
<div>
<h1>这是 App 组件</h1>
<login></login>
</div>
</template> <script>
export default {
name: 'App',
};
</script> <style scoped>
div{
color: green;
}
</style>

index.css:

body {
background-color: peachpuff;
color: darkred;
}

main.js:

import Vue from 'vue'
import App from './App.vue' import login from './components/login.vue';
import './index.css' Vue.use(login);
Vue.component('login', login); new Vue({
el: '#app',
render: c => c(App)
});

组件的scope属性实现原理: 外层div上,加css属性选择器

webpack: 使用bootstrap的样式

Bootstrap 4 Cheat Sheet:(小抄;备忘单)

https://hackerthemes.com/bootstrap-cheatsheet/

main.js导入, 其他组件就可以直接使用bs的样式了, 所有组件通过样式名调用就好了.

main.js

import Vue from 'vue'
import App from './App.vue' import '../node_modules/bootstrap/dist/css/bootstrap.css' new Vue({
el: '#app',
render: c => c(App)
});

App.vue

<template>
<div>
<h1>这是 App 组件</h1>
<div class="alert alert-primary" role="alert">
<strong>Well done!</strong> You successfully read this
important alert message.
</div>
</div>
</template> <script>
export default {
name: 'App',
};
</script> <style>
</style>

MintUI的使用

观察下这里的type,其实是调用了一种样式, 以前type=button, 组件默认的type是link, 超链接.

局部组件使用use or componetes注册?

使用js: [MintUI的js使用]

main.js

import Vue from 'vue'
import App from './App.vue' import 'mint-ui/lib/style.css'
import { Button } from 'mint-ui'
Vue.component(Button.name, Button);
console.log(Button.name); //mt-button let vm = new Vue({
el: '#app',
render: c => c(App)
});

App.vue

<template>
<div>
<h1>这是 App 组件</h1>
<mt-button type="default" @click="show">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
</div>
</template> <script>
import {Toast} from 'mint-ui'; export default {
name: 'App',
methods:{
show(){
Toast('提示信息');
}
}
};
</script> <style scoped>
div {
color: green;
}
</style>

[vue]webpack使用样式的更多相关文章

  1. Vue + Webpack + Vue-loader 1

    Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...

  2. vue学习:vue+webpack的快速使用指南(新手向)

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...

  3. Vue + webpack 项目实践

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  4. Vue & webpack

    在webpack构建的项目中使用vue进行开发 在入口文件中 import Vue from 'vue' 导入的构造函数,功能不完整,只提供了runtime-only的方式,并没有提供网页中那样的使用 ...

  5. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  6. 从0开始搭建vue+webpack脚手架(二)

    接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...

  7. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  8. Vue+Webpack配置css-loader时报错:Module build failed: Unknown word

    使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具.在针对css文件配置时遇到一个问题:打包构建时报错——Module b ...

  9. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

随机推荐

  1. mui+回复弹出软键盘

    最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来 ...

  2. c++基本函数

    std::abs 求绝对值函数 double abs (double x); float abs (float x); long double abs (long double x); std::sw ...

  3. Go编写的并行计算示例程序

    Go编写的并行计算示例程序 package main import "fmt" const ngoroute = 1000000 func f(left, right chan i ...

  4. JAVA中的array是通过线性表还是链表实现的呢?

    由于高级程序设计语言中的数组类型也有随机存取的特性,因此,通常都用数组来描述数据结构中的顺序存储结构.

  5. prometheus: celery, redis-export

    https://github.com/nlighten/tomcat_exporter https://github.com/prometheus/jmx_exporter https://vexxh ...

  6. Java8 in action

    解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...

  7. 请教神牛_字符串hash

    针对字符串hash 我早就听闻可以暴力的干一些事情. 比如 可以... 很多很多 实现O(n)求出 模式串在文本串出现的次数. 但是我不会这什么hash. 我会自然溢出字符串hash 嘿嘿 unsig ...

  8. TableView刷新跳动问题

    https://juejin.im/post/5aca1a04f265da2391486533 解决办法: 将估算高度设置为0即可: tableView.estimatedRowHeight = 0; ...

  9. 转载:SDWebImage支持URL不变时更新图片内容

    转载 http://blog.handy.wang/blog/2016/01/29/sdwebimagehuan-cun-zhi-tu-pian-urlbu-bian/ SDWebImage在iOS项 ...

  10. pip list 和 pip freeze

    https://blog.csdn.net/vitaminc4/article/details/76576956 Pip’s documentation statespip     descripti ...