Vue.js 最新官方下载地址与项目导入

article/2025/9/29 10:38:48

VUE2下载网址

VUE2使用示例：

VUE3下载与使用

VUE3示例：

在官网上下载vue.js或者是vue.min.js。并用<script>标签引入。

应小伙伴要求区分一下版本：

VUE2下载网址

Installation — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.vuejs.org/v2/guide/installation.html

进入官网后，点击下载这两个，其中这两个有一个是vue.js 有一个是vue.min.js。

2者的区别：vue.js没有经过压缩，适合开发测试Debug时使用，vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。

** 导入vue的方法非常简单, 然后直接拖到项目里的js目录，

在html里head添加：  <script src="js/vue.min.js"></script>

或者直接引用官方网址

<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

VUE2使用示例：

直接在<script></script> neｗ Vue(){}一个实例出来，即可使用vue来开发了。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app">{{message}} - {{age}}</div><script>const app = new Vue({el:"#app",  //#iddata:{message:"Lani",age:10}			});</script></body>
</html>

VUE3下载与使用

VUE3的话官方没有直接提供下载地址用VUE脚本架或者VITE为初始项目

VUE3官方文档地址：Quick Start | Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://vuejs.org/guide/quick-start.html

参考School3下载：打开对应的页面，然后另存到本地即可。名字不叫vue.js了，叫

vue.global.js

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js

unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js

参考网上朋友VUE3这个源码也可以直接引入在HTML里用。

VUE3示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导出数据</title><script src="../node_modules/vue/dist/vue.global.js"></script><script src="//unpkg.com/element-plus@1.0.2-beta.46/lib/index.full.js"></script>
</head>
<style>div {height: 30px;line-height: 30px;}
</style>
<body>
<br><br><br><br><br><br><br>
<div style="width:100%;" id="app"><div style="width:400px;margin:0 auto;"><h2>导出数据</h2><div>生成随机</div><el-radio v-model="randomScore" label="true">是</el-radio><el-radio v-model="randomScore" label="false">否</el-radio></p><p> <el-button type="primary" @click="exportExcel">导出数据</el-button></p></div>
</div>
</body></html>
<script>Object.assign(window, Vue);const vue3Composition = {setup() {const data = reactive({// 虚拟实验idexp_id: '',// 生成随机数(true/false)randomScore: false,// 日期时间dateTime: [],// 60-100分人数比例upRatio: '',// 学校idschool_id: '',});const exportExcel = () => {console.log("导出数据事件，randomScore",data.randomScore)}const dataRef = toRefs(data);return {exportExcel,...dataRef}},}const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
</script>

VUE2-baidu分享更新永久下载链接：