vue 04 模組化開發

2022-06-02 22:39:07 字數 1479 閱讀 6511

元件化開發，一般是將重複的**抽取成乙個元件，供其他地方復用，一般情況下，提到元件化開發，都是指前端的元件化開發。

模組化開發，一般是將同一類功能模組的**放到一起統一進行管理，是基於**層面的，一般情況下，提到模組化開發，都是指後端。

在ajax請求的出現，慢慢形成前後端分離。我們通常會將**組織到多個js中，方便維護。但是這種維護方式，依然不能避免一些災難性的問題。比如變數的汙染。

flag = true // aaa.jsflag = false // bbb.js
我們可以使用將需要的暴露在外面的變數，使用乙個模組作為出口。

var modulea = (function() )()


var moduleb = (function() )()
以上**就是模組化開發的雛形。將變數定義到乙個匿名函式中，這樣就可以避免變數名的衝突。

export用於匯出變數。

info.js

// 分別匯出name、age、gender三個變數


export let name = '張三'


export let age = 23


export let gender = '男'
我們使用export指令匯出了模組對外提供的介面，下面我們通過import指令來載入這個模組。

在html中使用script標籤引入js檔案，注意，這裡需要把type設定為module。

接著，使用import在main.js中引入info.js。

注意main.js

import  from './info.js'


console.log(name, age, gender)
import * as info from './info.js'


console.log(info.name,info.age,info.gender)
export function test(content)
某些情況下。乙個模組中包含某個功能，我們並不希望給這個功能去命名，而讓我們匯入者可以自己去命名。這個時候就可以使用export default

info2.js

let user = 


export default user
那麼，我們在main.js中，就可以直接使用了

import aaa from './info2.js'  


console.log(aaa)
需要注意的是：export default在乙個模組中，不允許同時出現多個。

Vue 模組化開發

隨著ajax非同步請求的出現，慢慢形成了前後端的分離 function 常見的模組化規範 commonjs amd cmd，也有es6的modules modul.exports demo a,b commonjs的匯入 commonjs模組 let require modulea 等同於 let ...

Vue模組化開發

是前端分離後 執行所需要的環境 內建了npm 包管理工具 後端之於m en 2.配置國內映象 npm config set registry 3.npm install webpack g 全域性安裝webpack 4.npm insatall g vue cli init 全域性安裝vue腳手架 ...

Vue的模組化開發

為什麼需要模組化 在我們以前編寫的js 中，因為js 從上到下執行，這樣當很多人同時編寫js時，可能a寫的變數被b修改了，當a在使用自己的變數，那麼就可能報錯，以前有乙個解決方案，就是使用函式，但是同時又出現了乙個問題，就是當a使用函式編寫js時，a在其他地方使用裡面變數，就使用不到 函式變數的作用...