引入vue3依赖库三种的方式

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

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

cdn属于远程库,远程引用依赖, 以下是三个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,然后再代码中引用
引入vue3依赖库三种的方式_第1张图片
引入vue3依赖库三种的方式_第2张图片







<script src="D:\html_project\vue_to_android\vue3.2.12global.js">script>

方法三、安装vue.js到电脑全局依赖

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



这种方式的前提就是,你需要安装node.js,以及调用npm install vue -g,下面列举相关步骤
1.下载安装node.js
官网下载最新版本:https://nodejs.org/en/download/current/
引入vue3依赖库三种的方式_第3张图片

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

3.同时按window+R键,输入cmd,打开命令提示符窗口
引入vue3依赖库三种的方式_第4张图片
4.查看刚才所安装的node版本以及npm
输入: node –v(查看刚才所安装的node版本) npm –v (查看npm版本)
引入vue3依赖库三种的方式_第5张图片

5.下载安装vue.js依赖到电脑全局
输入 npm install vue -g 安装,检查安装是否成功npm list vue
引入vue3依赖库三种的方式_第6张图片

整体样例vue html代码
DOCTYPE html>
<html lang="en">

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

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


<body>
    





















<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>

样例 实际效果:
引入vue3依赖库三种的方式_第7张图片
创造价值,乐哉分享!

你可能感兴趣的:(我的第一个前端项目,vue.js,前端,node.js,前端框架)