[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),效果如下: 转译以后 好, ...
随机推荐
- mysql基础---->mybatis的批量插入(一)
这里面记录一下使用mybatis处理mysql的批量插入的问题,测试有可能不准.只愿世间风景千般万般熙攘过后,字里行间,人我两忘,相对无言. mybatis的批量插入 我们的测试主体类是springb ...
- 宝塔使用FTP的问题
我们在使用宝塔FTP面板的时候,会用到FTP工具,但是开的账号在使用 FTP或WinSCP的时候会出现问题,连接不上. 具体解决方式: 参考文档: https://blog.csdn.net/hc11 ...
- FileInputFormat看这一段源码
这是FileInputFormat中的一个方法,看一下它的功能,多看源码,理解hadoop,同时提高自己的java编程能力: private static String[] getPathString ...
- centos7 安装redis服务及phpredis扩展
闲话少说 服务器版本:centos7.6 64位 软件包:https://pan.baidu.com/s/1Gb4iz5mqLqNVWvvZdBiOMQ 提取码: xrhx 一.安装redis 放在/ ...
- 比例尺与DEM空间分辨率
我国 4 种比例尺 DEM 及其空间分辨率的对应关系: 1:100 万 DEM -- 1000m 空间分辨率: 1:25 万 DEM -- 100m 空间分辨率: 1:5 万 DEM ...
- Jumpserver堡垒机
堡垒机介绍 搭建简易堡垒机 安装步骤 wget --no-check-certificate https://olivier.sessink.nl/jailkit/jailkit-2.19.tar.b ...
- .NET Core开发日志——视图与页面
当一个Action完成它的任务后,通常需要返回一个实现IActionResult的对象,而最常见的就是View或者ViewResult,所谓的视图对象.那么视图与最终所看到的页面之间的联系又是怎样形成 ...
- ppt转成图片等其它对象
https://www.cnblogs.com/Yesi/p/5388152.html 从E-iceblue官网下载Free Spire.Presentation使用.下载完成后,请将bin文件夹的. ...
- 用CMD命令进行关机/重启
用CMD命令进行关机/重启 - WingsBlog https://www.wusiwei.com/post-185.html [实用]CMD关机.重启命令 - Kevin.Chen - 专注前行 - ...
- Diagnosing out of memory errors and memory leaks 内存泄露实例 C Java JavaScript 内存泄露
小结: 1. 数据库连接池. JDBC语句和结果对象必须显式地关闭. 2. 电梯到目标楼层后地址是否被释放 When a button is pressed: Get some memory, whi ...