• vue中cssModules理解可以用于加密和避免重复使用


    cssModules可以用于加密和避免重复使用,也就是说可以在当前vue文件中写的样式会生成独一无二的名字,在其他vue文件中是无法调用的,

    一、可以直接配cssModules

    第一步,配置vue-loader.js文件

    const docsLoader = require.resolve('./doc-loader')
    module.exports = (isDev) =>{
    	return {
                    ...
    		cssModules:{
    			//在当前vue文件中写的样式会生成独一无二的名字,在其他vue文件中是无法调用的
    			localIdentName:'[path]-[name]-[hash:base64:5]',
    			//把css类名为‘-’连接的,转化为驼峰的
    			//详情见header.vue  如果要vue中css样式用camelCase方法需要在style标签中配置module
    			camelCase:true
    		}
                    ...
    		    
    	}
    }   

    第二步 在webpack.config.base.js中配置如下

    !!也不一定是webpack.config.base.js  只要是执行用vue-loader 打包vue文件的地址多配置一条即可。

     const createvueLoaderOptions = require('./vue-loader.config')

    ... rules: [ { test: /.vue$/, loader: 'vue-loader', options:createvueLoaderOptions(isDev) }, ...

    第三步  在vue文件中使用module

    <template>
      <header :class="$style.mainHeader">
     <!-- <header :class="$style.mainHeader">  ==  <header class="main-header"> 
      用了module页面class就生成独一无二的 class="client-layout--header-2AE8s_0"
       -->
        <h1>JTodo</h1>
      </header>
    </template>
    <!--使用module-->
    <style lang="stylus" module>
    .main-header{
      text-align center
      h1{
        font-size 100px
        color: rgba(175, 47, 47, 0.4)
        font-weight 100
        margin 20px
      }
    }
    </style>

    浏览器中网页生成的class如图

    二、如果想使用css-loader的时候也如上可以自定义name如何做呢?

    第一步  配置一个option定义一个规则

    ...
    module:{
      	rules:[
      	  {
      		test: /.styl/,
    		 use: [
    			'vue-style-loader',
    		    {
    			loader:'css-loader',
    			options:{
    				module:true,
        //可以开启一个localIdentName localIdentName:isDev ? '[path]-[name]-[hash:base64:5]':'[hash:base64:5]', } }, ] } ] }, ...

     第二步如何使用呢?如下

    import '../assets/styles/footer.styl'
    
    export default {
      data() {
        return {
          author: 'Jokcy'
        }
      },
      render() {
        return (
          <div id="footer">
            <span>Written by {this.author}</span>
          </div>
        )
      }
    }
    

      上面的代码 改成如下代码

    import classNames from'../assets/styles/footer.styl'
    
    export default {
      data() {
        return {
          author: 'Jokcy'
        }
      },
      render() {
        return (
          <div id={classNames.footer}>
            <span>Written by {this.author}</span>
          </div>
        )
      }
    }
    

      

    如图id名字编程了定义好的规则

    这样也可以起到一个加密的作用。

    有不对的地方请大神多多指教。互相借鉴

  • 相关阅读:
    jenkins经验
    svn源代码变动后一分钟内启动执行?按照定好的时间点执行?(项目构建的触发)
    appium-基本操作的再次封装(加上文件路径、log、截图、异常处理)
    app上一些特别的操作(下拉框、滚动列表、弹框提示、html5、微信小程序、手势密码)
    jenkins不能执行windows下的命令,cmd可执行。
    windows下使用svn命令行
    jenkins+mail邮件配置
    appium遇到click事件,提示"w3cStatus":400
    windows下彻底删除jenkins
    Educational Codeforces Round 41 (Rated for Div. 2)
  • 原文地址:https://www.cnblogs.com/wenbodeboke/p/10130139.html
Copyright © 2020-2023  润新知