引入vue3依赖库三种的方式

方式一远程cdn -方式二把远程的vue.global.min.js拷贝到本地方式方式三npm安装vue.js引入电脑全局就不需要再使用文件引用了

☆七年

3063人浏览 · 2024-01-18 10:47:51

☆七年 · 2024-01-18 10:47:51 发布

背景： 写了一个vue3 html 样例，但是打开显示超级慢
原因： 使用cdn远程vue依赖库，因为网络和其他原因，加载不出来。
这里实践总结了，三种vue3依赖方式

方式一、引用cdn远程vue依赖

cdn属于远程库，远程引用依赖, 以下是三个cdn库

<!-- 方式一 cdn-->
<!-- 引入 Vue 3 的 CDN 资源网络加载不了 加载慢-->
<!-- <script src="https://unpkg.com/vue@next"></script> -->

<!-- 引入 Vue 3 的 CDN 资源 公司网络加载不了  无用-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>-->

<!-- 引入 Vue 3 的 CDN 资源 公司网络能加载  有用 推荐-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js"></script>

方式二、使用本地vue.js依赖 - 推荐

把远程的vue.global.min.js拷贝到本地，新建js文件我这里命名为vue3.2.12global.js,然后再代码中引用
在这里插入图片描述

<!-- 方式二 本地-->
<!-- 引入 Vue 3 的本地js 有用 -->
<!-- 把cdn远程vue.global.min.js文件复制到本地，命名，接着真实路径引用-->
<!-- 相对路径 -->
<!-- <script src="vue3.2.12global.js"></script> -->
<!-- 绝对路径 -->
<script src="D:\html_project\vue_to_android\vue3.2.12global.js"></script>

方法三、安装vue.js到电脑全局依赖 -（可能不怎么有效）

电脑全局vue.js引入不需要再文件引用，就可以打开了

<!-- 方式三 电脑全局vue.js引入 不需要再文件引用，就可以打开了 -->
<!-- 下载安装node.js,使用node命令 `npm install vue -g`下载安装vue.js 到电脑全局，检查是否安装成功 `npm list vue` 有用  -->

这种方式的前提就是，你需要安装node.js，以及调用npm install vue -g，下面列举相关步骤
1.下载安装node.js
官网下载最新版本：https://nodejs.org/en/download/current/
在这里插入图片描述

2.安装node.js下一步下一步就行，自己会添加到环境变量

3.同时按window+R键,输入cmd,打开命令提示符窗口
在这里插入图片描述
4.查看刚才所安装的node版本以及npm
输入： node –v（查看刚才所安装的node版本） npm –v　（查看npm版本）

5.下载安装vue.js依赖到电脑全局
输入 npm install vue -g 安装，检查安装是否成功npm list vue
在这里插入图片描述

整体样例vue html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    <h1>alllalalallalal 默认会被覆盖</h1>
</div>
<template id="why">
    <div>
        <h2>{{message}}</h2>
        <h2>{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>


<body>
    <!-- 以下是引入vue依赖库三种的方式 -->

<!-- 方式一 cdn-->
<!-- 引入 Vue 3 的 CDN 资源网络加载不了 加载慢-->
<!-- <script src="https://unpkg.com/vue@next"></script> -->

<!-- 引入 Vue 3 的 CDN 资源 公司网络加载不了  无用-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>-->

<!-- 引入 Vue 3 的 CDN 资源 公司网络能加载  有用 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js"></script> -->

<!-- 方式二 本地-->
<!-- 引入 Vue 3 的本地js 有用 -->
<!-- 把cdn远程vue.global.min.js文件复制到本地，命名，接着真实路径引用-->
<!-- 相对路径 -->
<!-- <script src="vue3.2.12global.js"></script> -->
<!-- 绝对路径 -->
<!-- <script src="D:\html_project\vue_to_android\vue3.2.12global.js"></script> -->

<!-- 方式三 安装vue.js引入电脑全局 就不需要再文件引用，就可以打开了 -->
<!-- 下载安装node.js,使用node命令 `npm install vue -g`下载安装vue.js 到电脑全局，检查是否安装成功 `npm list vue` 有用  -->
<script>
        Vue.createApp({
            template: '#why',
            data: function() {
                return {
                    message: "hello world!",
                    counter: 100
                }
            },
            methods: {
                increment() {
                    this.counter++;
                    console.log("点击了+1");
                },
                decrement() {
                    this.counter--;
                    consloe.log("点击了-1");
                }
            }

        }).mount("#app")
    </script>

</body>

</html>

样例实际效果：
在这里插入图片描述
创造价值，乐哉分享！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^