很多前端框架，如vue.js，都既可以在单页面中使用，也可以在网站的页面上直接引用使用。在网站的网页上直接引用时，一般在网页上引用unpkg或者cdnjs等CDN链接。然而，如果网站处于与因特网隔离的内网，就需要将需要引用的文件下载，部署到内网服务器使用。这里，以使用vue.js的vxe-table插件为例，说明如何下载、部署、使用npm包。
首先，使用npm install 下载需要的包到本地，这里我们需要下载vue、xe-utils和vxe-table。下载过程比较简单，创建一个空目录，打开命令行，进入这个目录，执行：
npm install vue
执行完成后，给出如下提示：
安装vue
由于我们只是下载库，可以忽略错误提示。这时，会发现目录中多了一个子目录node_modules，这个子目录中有vue目录。其中的dist中存放了我们需要的文件：
图片.png
然后执行npm install xe-utils 和npm install vxe-table，下载我们需要的模块。
这些文件下载完成后，就可以应用到本地开发环境，下面是使用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>
运行结果如下：
运行结果
