这篇文章主要介绍了详解如何用模块化的方式写vuejs，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
引子
vuejs 是一个入门简单的框架，具有使用简单，扩展方便的特点。随着webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代码。最近写了一个json viewer-ac，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。
文件结构
<template>
<p>
<app-header></app-header>
</p>
</template>
<style>
...
</style>
<script>
import AppHeader from './AppHeader.vue'
export default {
name:'app',
props:['data']
data() {
return {}
},
methods: {
handleClick() {}
},
components: {
AppHeader
}
}
</script>template 里是模板代码，这里一般是一个闭合的html标签，比如一个p。
style 里是css代码，这个代码是作用到整个页面的，如果只想作用到当前的模板中，需要用scoped属性
<style scoped>
如果想用一些css预处理器，比如sass，只需要声明lang，然后vue-loader就会自动的加载，当然，前提是对应的 sass-loader安装好。
<style lang="sass">
script 注意这里使用的是 es6 的代码，我是使用babel来编译，所以理所当然需要安装 babel，es6的preset，还要在根目录下自建 .babelrc 文件。具体可以参考我的 ac 或者用官方的 vue-cli 来初始化项目。
template 做不可见标签
template不仅是模板最外面的标签，同时，它也可以作为一个普通的标签使用。比如，当我们需要用 v-if 来控制部分区域的显示与隐藏时，就可以这样。
<template>
<template v-if="valid">
<p></p>
</template>
<template v-else>
<p></p>
</template>
</template>而且，template是不会被渲染的，所以不会影响最终的dom结构。
注意：v-show 不能和 template 一起使用
flux
实际开发的时候，会发现原始的数据管理模式比较混乱，很难区分哪些是临时数据，持久数据，用户数据，后台数据，这个时候，引入 flux是再合适不过了。
如果暂时不想引入别的lib，可以尝试自己实现一个，其实非常简单。准备一个 store.js
let trim = str => {
return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
export const state = {
jsons: []
}
export const actions = {
parse(jsonStr) {
if(!trim(jsonStr)) return
let jsonObj = 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
}
},<child :state="state" :handleClick="actions.update"></child>
import 公共的css
如果将页面常用的style变量存储到一个公共的文件比如 common.sass
$width: 80%; $height: 100%; $moli-green:#CCF3E4; $moli-white:#f8f8f8;
然后在组件的style中引入，岂不是很方便，很强大。
不过遗憾的是我暂时还不知道这个该如何实现。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是在vuejs中使用模块化的方式开发的详细内容。更多信息请关注PHP中文网其他相关文章！
