這篇文章主要介紹了詳解如何用模組化的方式寫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中文網其他相關文章！
