[vue]webpack使用样式
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, 超链接.
使用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使用样式的更多相关文章
- Vue + Webpack + Vue-loader 1
Vue + Webpack + Vue-loader 原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue ...
- vue学习:vue+webpack的快速使用指南(新手向)
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- Vue + webpack 项目实践
Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...
- Vue & webpack
在webpack构建的项目中使用vue进行开发 在入口文件中 import Vue from 'vue' 导入的构造函数,功能不完整,只提供了runtime-only的方式,并没有提供网页中那样的使用 ...
- nodejs, vue, webpack 项目实践
vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...
- 从0开始搭建vue+webpack脚手架(二)
接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热 ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- Vue+Webpack配置css-loader时报错:Module build failed: Unknown word
使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具.在针对css文件配置时遇到一个问题:打包构建时报错——Module b ...
- 使用pug(jade),以及在vue+webpack中使用pug(jade)
一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...
随机推荐
- mui+回复弹出软键盘
最近再做一个APP的时候,有一个评论回复的功能,在做APP的时候,直接用手指触发focus事件,来唤醒软键盘的弹出没有问题, 但是现在的功能需要对点击回复进行弹出软键盘来操作,参考过很多都有问题,后来 ...
- c++基本函数
std::abs 求绝对值函数 double abs (double x); float abs (float x); long double abs (long double x); std::sw ...
- Go编写的并行计算示例程序
Go编写的并行计算示例程序 package main import "fmt" const ngoroute = 1000000 func f(left, right chan i ...
- JAVA中的array是通过线性表还是链表实现的呢?
由于高级程序设计语言中的数组类型也有随机存取的特性,因此,通常都用数组来描述数据结构中的顺序存储结构.
- prometheus: celery, redis-export
https://github.com/nlighten/tomcat_exporter https://github.com/prometheus/jmx_exporter https://vexxh ...
- Java8 in action
解决的问题: behavior parameterization,即可以把一段code,逻辑作为参数传入: 这样做的目的,当然为了代码抽象和重用,把变化的逻辑抽象出去: 在java中,如果要实现beh ...
- 请教神牛_字符串hash
针对字符串hash 我早就听闻可以暴力的干一些事情. 比如 可以... 很多很多 实现O(n)求出 模式串在文本串出现的次数. 但是我不会这什么hash. 我会自然溢出字符串hash 嘿嘿 unsig ...
- TableView刷新跳动问题
https://juejin.im/post/5aca1a04f265da2391486533 解决办法: 将估算高度设置为0即可: tableView.estimatedRowHeight = 0; ...
- 转载:SDWebImage支持URL不变时更新图片内容
转载 http://blog.handy.wang/blog/2016/01/29/sdwebimagehuan-cun-zhi-tu-pian-urlbu-bian/ SDWebImage在iOS项 ...
- pip list 和 pip freeze
https://blog.csdn.net/vitaminc4/article/details/76576956 Pip’s documentation statespip descripti ...