很多前端框架椎咧，如vue.js侠讯，都既可以在單頁面中使用挖藏，也可以在網(wǎng)站的頁面上直接引用使用。在網(wǎng)站的網(wǎng)頁上直接引用時厢漩，一般在網(wǎng)頁上引用unpkg或者cdnjs等CDN鏈接膜眠。然而，如果網(wǎng)站處于與因特網(wǎng)隔離的內(nèi)網(wǎng)，就需要將需要引用的文件下載宵膨，部署到內(nèi)網(wǎng)服務(wù)器使用架谎。這里，以使用vue.js的vxe-table插件為例辟躏，說明如何下載谷扣、部署、使用npm包捎琐。
首先会涎，使用npm install 下載需要的包到本地，這里我們需要下載vue瑞凑、xe-utils和vxe-table末秃。下載過程比較簡單，創(chuàng)建一個空目錄籽御，打開命令行练慕，進入這個目錄，執(zhí)行：
npm install vue
執(zhí)行完成后技掏，給出如下提示：
安裝vue
由于我們只是下載庫铃将，可以忽略錯誤提示。這時零截，會發(fā)現(xiàn)目錄中多了一個子目錄node_modules麸塞，這個子目錄中有vue目錄。其中的dist中存放了我們需要的文件：
圖片.png
然后執(zhí)行npm install xe-utils 和npm install vxe-table涧衙，下載我們需要的模塊哪工。
這些文件下載完成后，就可以應(yīng)用到本地開發(fā)環(huán)境弧哎，下面是使用vxe-table的簡單實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="Libs/vxe-table/lib/index.css">
<script src="Libs/vue/vue.min.js"></script>
<script src="Libs/xe-util/xe-utils.min.js"></script>
<script src="Libs/vxe-table/lib/index.min.js"></script>
<title></title>
</head>
<body>
<div id="app">
{{message}}
<vxe-table :data="tableData">
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性別"></vxe-table-column>
<vxe-table-column field="age" title="年齡"></vxe-table-column>
</vxe-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: "Hello",
tableData: [
{
name: "張三",
sex: "男",
age:"29"
},
{
name: "大妞",
sex: "女",
age:"18"
}
]
};
}
});
</script>
</body>
</html>
運行結(jié)果如下：
運行結(jié)果
