小編給大家分享一下怎么用模塊化的方式寫vuejs，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、霞山ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的霞山網(wǎng)站制作公司

引子

vuejs 是一個(gè)入門簡(jiǎn)單的框架，具有使用簡(jiǎn)單，擴(kuò)展方便的特點(diǎn)。隨著webpack的流行，vuejs也推出了自己的load，vue-loader，可以方便的打包代碼。最近寫了一個(gè)json viewer-ac，就是完全使用vue-loader帶來(lái)的模塊化特性，寫的比較開心，也得到了不少經(jīng)驗(yàn)。這里記錄一下。

文件結(jié)構(gòu)

template 里是模板代碼，這里一般是一個(gè)閉合的html標(biāo)簽，比如一個(gè)div。

style 里是css代碼，這個(gè)代碼是作用到整個(gè)頁(yè)面的，如果只想作用到當(dāng)前的模板中，需要用scoped屬性

如果想用一些css預(yù)處理器，比如sass，只需要聲明lang，然后vue-loader就會(huì)自動(dòng)的加載，當(dāng)然，前提是對(duì)應(yīng)的 sass-loader安裝好。

script 注意這里使用的是 es6 的代碼，我是使用babel來(lái)編譯，所以理所當(dāng)然需要安裝 babel，es6的preset，還要在根目錄下自建 .babelrc 文件。具體可以參考我的 ac 或者用官方的 vue-cli 來(lái)初始化項(xiàng)目。

template 做不可見標(biāo)簽

template不僅是模板最外面的標(biāo)簽，同時(shí)，它也可以作為一個(gè)普通的標(biāo)簽使用。比如，當(dāng)我們需要用 v-if 來(lái)控制部分區(qū)域的顯示與隱藏時(shí)，就可以這樣。

而且，template是不會(huì)被渲染的，所以不會(huì)影響最終的dom結(jié)構(gòu)。

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

flux

實(shí)際開發(fā)的時(shí)候，會(huì)發(fā)現(xiàn)原始的數(shù)據(jù)管理模式比較混亂，很難區(qū)分哪些是臨時(shí)數(shù)據(jù)，持久數(shù)據(jù)，用戶數(shù)據(jù)，后臺(tái)數(shù)據(jù)，這個(gè)時(shí)候，引入 flux是再合適不過了。

如果暫時(shí)不想引入別的lib，可以嘗試自己實(shí)現(xiàn)一個(gè)，其實(shí)非常簡(jiǎn)單。準(zhǔn)備一個(gè) 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})
    }
  }
}

所有視圖的數(shù)據(jù)都來(lái)自 state。所有修改必須通過actions來(lái)完成。 因?yàn)樵谧咏M件中對(duì)數(shù)據(jù)的修改并不會(huì)影響到父組件，所以可以放心的使用 vuejs 的雙向綁定特性。

然后可以在app的根組件下引入 state和actions，然后按需要傳遞給子組件
 

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

import 公共的css

如果將頁(yè)面常用的style變量存儲(chǔ)到一個(gè)公共的文件比如 common.sass

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

然后在組件的style中引入，豈不是很方便，很強(qiáng)大。

以上是“怎么用模塊化的方式寫vuejs”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：怎么用模塊化的方式寫vuejs-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/dicdhi.html