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. mysql基础---->mybatis的批量插入(一)

    这里面记录一下使用mybatis处理mysql的批量插入的问题,测试有可能不准.只愿世间风景千般万般熙攘过后,字里行间,人我两忘,相对无言. mybatis的批量插入 我们的测试主体类是springb ...

  2. 宝塔使用FTP的问题

    我们在使用宝塔FTP面板的时候,会用到FTP工具,但是开的账号在使用 FTP或WinSCP的时候会出现问题,连接不上. 具体解决方式: 参考文档: https://blog.csdn.net/hc11 ...

  3. FileInputFormat看这一段源码

    这是FileInputFormat中的一个方法,看一下它的功能,多看源码,理解hadoop,同时提高自己的java编程能力: private static String[] getPathString ...

  4. centos7 安装redis服务及phpredis扩展

    闲话少说 服务器版本:centos7.6 64位 软件包:https://pan.baidu.com/s/1Gb4iz5mqLqNVWvvZdBiOMQ 提取码: xrhx 一.安装redis 放在/ ...

  5. 比例尺与DEM空间分辨率

    我国 4 种比例尺 DEM 及其空间分辨率的对应关系:  1:100 万 DEM  --  1000m 空间分辨率:  1:25 万 DEM  --  100m 空间分辨率:  1:5 万 DEM  ...

  6. Jumpserver堡垒机

    堡垒机介绍 搭建简易堡垒机 安装步骤 wget --no-check-certificate https://olivier.sessink.nl/jailkit/jailkit-2.19.tar.b ...

  7. .NET Core开发日志——视图与页面

    当一个Action完成它的任务后,通常需要返回一个实现IActionResult的对象,而最常见的就是View或者ViewResult,所谓的视图对象.那么视图与最终所看到的页面之间的联系又是怎样形成 ...

  8. ppt转成图片等其它对象

    https://www.cnblogs.com/Yesi/p/5388152.html 从E-iceblue官网下载Free Spire.Presentation使用.下载完成后,请将bin文件夹的. ...

  9. 用CMD命令进行关机/重启

    用CMD命令进行关机/重启 - WingsBlog https://www.wusiwei.com/post-185.html [实用]CMD关机.重启命令 - Kevin.Chen - 专注前行 - ...

  10. Diagnosing out of memory errors and memory leaks 内存泄露实例 C Java JavaScript 内存泄露

    小结: 1. 数据库连接池. JDBC语句和结果对象必须显式地关闭. 2. 电梯到目标楼层后地址是否被释放 When a button is pressed: Get some memory, whi ...