这次给大家带来Vue怎样进行局部作用域 & 模块化，Vue进行局部作用域 & 模块化的注意事项有哪些，下面就是实战案例，一起来看一下。
CSS Modules 为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如：
/* button.css */
.button {
font-size: 16px;
}
.mini {
font-size: 12px;
}它会被转换为类似这样：
/* button.css */
.button__button--d8fj3 {
font-size: 16px;
}
.button__mini--f90jc {
font-size: 12px;
}当导入一个 CSS 模块文件时，它会将局部类名到全局类名的映射对象提供给我们。就像这样：
import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = ''vue-css-modules ：简化类名映射
下面是一个使用了 CSS Modules 的按钮组件：
的确，CSS Modules 对于 Vue 组件是一个不错的选择。但也存在以下几点不足：
你必须在 data 中传入 styles
你必须使用 styles.localClassName 导入全局类名
如果有其他全局类名，你必须将它们放在一起
如果要和组件的属性值绑定，就算局部类名和属性名一样，也要显式指定
对于上面的按钮组件，使用 vue-css-modules 后：
现在：
你不必在 data 中传入 styles ，但得在 mixins 中传入 styles :full_moon_with_face:
你可以跟 styles.localClassName 说拜拜了
将局部类名放在 styleName 属性，全局类名放在 class 属性，规整了许多
局部类名绑定组件同名属性，只需在其前面加上 : 修饰符
修饰符
@button
这等同于：
这让你能在外部重置组件的样式：
.form [data-component-button] {
font-size: 20px;
}$type
这等同于：
:mini
这等同于：
disabled=isDisabled
这等同于：
使用方法
在 Vue 模板中使用
引入模板外部的 CSS 模块
使用模板内部的 CSS 模块
在 Vue JSX 中使用
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean },
render() {
return (
)
}
}在 Vue 渲染函数中使用
import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
mixins: [CSSModules(styles)],
props: { mini: Boolean },
render(h) {
return h('button', {
styleName: '@button :mini'
}, '点我')
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。 管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用 全自动化控制，功能模块可扩展性强。 搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短 的时间内提升网站的曝光率。 企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服
