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

Lan.W

已于 2025-03-02 10:39:24 修改

阅读量4.6w

点赞数 68

CC 4.0 BY-SA版权

文章标签： vue.js javascript

于 2022-06-09 11:18:34 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/125199856

在官网上下载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",  //#id
				data:{
					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

html页面引用

按官方说法，使用CDN直接引用服务器上的即可：

VUE3下载

浏览器直接打开上面CDN，默认会打开3.x最新版代码，直接另存为.js即可

vue3脚本名称

参考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 : vue最新版发布所有版本vue - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

#未压缩：

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

已压缩：

https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.8/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({
                // 虚拟实验id
                exp_id: '',
                // 生成随机数(true/false)
                randomScore: false,
                // 日期时间
                dateTime: [],
                // 60-100分人数比例
                upRatio: '',
                // 学校id
                school_id: '',
            });

            const exportExcel = () => {
                console.log("导出数据事件，randomScore",data.randomScore)
            }
            const dataRef = toRefs(data);
            return {
                exportExcel,
                ...dataRef
            }
        },
    }
    const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
</script>

运行效果：