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

引子

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

文件结构

 <template>  <div>   <app-header></app-header>  </div></template><style>...</style><script>  import AppHeader from './AppHeader.vue'  export default {   name:'app',   props:['data']   data() {    return {}    },   methods: {    handleClick() {}   },   components: {    AppHeader   }  }</script>

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

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">    <div></div>  </template>  <template v-else>   <div></div>  </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})    }  }}