详解如何用模块化的方式写vuejs

2023-09-19 08:29:05 46

引子

vuejs是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码。最近写了一个jsonviewer-ac，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。

文件结构

template里是模板代码，这里一般是一个闭合的html标签，比如一个div。

style里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用scoped属性

如果想用一些css预处理器，比如sass，只需要声明lang，然后vue-loader就会自动的加载，当然，前提是对应的sass-loader安装好。

script注意这里使用的是es6的代码，我是使用babel来编译，所以理所当然需要安装babel，es6的preset，还要在根目录下自建.babelrc文件。具体可以参考我的ac或者用官方的vue-cli来初始化项目。

template做不可见标签

template不仅是模板最外面的标签，同时，它也可以作为一个普通的标签使用。比如，当我们需要用v-if来控制部分区域的显示与隐藏时，就可以这样。

而且，template是不会被渲染的，所以不会影响最终的dom结构。

注意：v-show不能和template一起使用

flux

实际开发的时候，会发现原始的数据管理模式比较混乱，很难区分哪些是临时数据，持久数据，用户数据，后台数据，这个时候，引入flux是再合适不过了。

如果暂时不想引入别的lib，可以尝试自己实现一个，其实非常简单。准备一个store.js

lettrim=str=>{
returnstr.replace(/(^[\s\t]+)|([\s\t]+$)/g,'');
}
exportconststate={
jsons:[]
}

exportconstactions={
parse(jsonStr){
if(!trim(jsonStr))return

letjsonObj=null
try{
jsonObj=JSON.parse(jsonStr)
}catch(err){
state.jsons.push({err:jsonStr+'',valid:false})

}
if(jsonObj){
state.jsons.push({obj:jsonObj,valid:true})
}
}
}

所有视图的数据都来自state。所有修改必须通过actions来完成。因为在子组件中对数据的修改并不会影响到父组件，所以可以放心的使用vuejs的双向绑定特性。

然后可以在app的根组件下引入state和actions，然后按需要传递给子组件

import{state,actions}from'../store'data(){
return{
state,
actions
}
},

import公共的css

如果将页面常用的style变量存储到一个公共的文件比如common.sass

$width:80%;
$height:100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8;

然后在组件的style中引入，岂不是很方便，很强大。

不过遗憾的是我暂时还不知道这个该如何实现。:(

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解如何用模块化的方式写vuejs

热门推荐

随机推荐