如何在原生HTML里面使用VUE（保姆级教学）

最新推荐文章于 2024-05-06 17:11:44 发布
最新推荐文章于 2024-05-06 17:11:44 发布
阅读量1.6w 收藏 38
点赞数 8
文章标签： html vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57956183/article/details/131726037
版权

一、如何引用Vue.js到html文件里

1.以cdn的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 将上面代码添加到html的head里，即可全局使用vue的方法；

 2.直接将vue文件保存到本地，再引入

可以采取下面方法：

（1）将CDN的路径（https://cdn.jsdelivr.net/npm/vue/dist/vue.js）复制到浏览器，并搜索；

（2）将搜索到的内容全选复制项目的vue.js文件里，如图；

 （3）在index.html里面引入；

 上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用类似的方式引入到原生HTML里。

二、如何在html文件里使用VUE

成功引入vue后，我们就可以在html文件里使用vue，下面是示例；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home"></div>
    <script>
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {};
        },
        methods: {},
        mounted() {},
        created() {},
      });
    </script>
  </body>
</html>

这样就可以在html里面使用Vue了，下期我将分享在html里面使用Vue组件~

海豹先生_
关注
  • 8
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
html中创建并调用vue组件的几种方法汇总
01-21
作者：Echoyya 出处：https://www.cnblogs.com/echoyya/ 最近在写项目的时候，总是遇到在html中使用vue.js的情况，且页面逻辑较多，之前的项目经验都是使用脚手架等已有的项目架构，使用.vue文件完成组价注册，及组件之间的调用，还没有过在html中创建组件的经验，所以借此机会学习总结一下。 方法一：Vue.extend( options ) 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 – 在 Vue.extend() 中它必须是函数 extend 创建的是 Vue 构造器，而
html中使用vue和echarts
02-20
html中使用vue和echarts
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
weixin_28692153的博客
06-16 1309
vue.js怎样引入到HTML中如何将vue.js引入HTML，把vue.js引入HTML的方法：一、下载vue . js；然后在HTML中添加vue.js包，其语法为“script src=’ $ { path }/web/constant/vue . js ‘/script”。这个教程操作环境：windows7系统，2.0版，这个方法适合所有品牌的电脑。推荐：《vue教程》vue.j...
Vue项目中引入html页面（vue.js中引入echarts数据大屏html [静态非数据传递!] ）
Start_Simple的博客
04-01 778
vue3原有public文件夹下 我这边是新建一个static文件夹 专门存放要用到的html文件 复制拖拽过来。这里是静态展示 动态数据效果还需html页面加一个监听message的事件这篇文件不赘述。方法 不同于vue的 components: { } 命名方式。再修改宽高即可满足首页(vue页)呈现引入的html。在项目原有vue（例如首页）基础上引入html页面。index为html的首页。vue调用vue页面方式。
html页面引入vue
CoffeeAndIce的博客
08-11 1万+
基础环境 ①所需的基本ui组件 基本后台模块 element、iview ，手机端可以mui 、 uniapp ②所需Vue版本 建议官方最新版本为准，稳定性可靠 ③兼容vue文件的http-vue-loader 可以无需脚手架情况下对vue以脚手架形式编写vue文件，同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.
在 HTML 中引入 vue.js 写页面
Start2019
12-05 1万+
突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 vue 熟悉那么一丢丢。但是没办法鸭，只能硬着头皮去做了！在这里做一下笔记。 一、前期准备 1. 新建文件夹，并且命名为： css、imgs、pages、js，在对应的文件夹下放对应的文件。 2. 引入样式。 不想要自己写样式和逻辑，而且是要基于 vue 的，那就只好找基于 vue 的 UI 库了—— e...
html 引入 vue.js
笑望灬星辰
06-13 1万+
html 引入 vue.js 1 vue官网 下载 vue.js 目录结构 编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js">&
在HTML页面中引入vue组件
热门推荐
zysskt的博客
10-20 1万+
vue2
html文件引用.vue 文件的方式
dulei_start的博客
12-17 7047
1.html文件 先引入vue.js 再引入httpVueLoader.js 注册httpVueLoader。 在script中Vue.use(httpVueLoader); 在components中注册组件，httpVueLoader的注册方式有好几种，具体引用方式看个人习惯，更多的可以去看httpVueLoader官网：https://www.npmjs.com/package/http-vue-loader； <!DOCTYPE html> <html lang="en
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 3351
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
普通HTML文件如何使用VUE组件
qq_63704334的博客
06-19 8982
标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用。你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。标签内，添加以下代码来引入Vue框架的JavaScript文件。现在，你可以在HTML文件中使用Vue组件了。1. 引入Vue框架：在HTML文件中的。3.编写Vue组件：在HTML文件中的。中，并显示组件中定义的内容。
vue 使用外部JS与调用原生API操作示例
12-13
本文实例讲述了vue 使用外部JS与调用原生API操作。分享给大家供大家参考，具体如下： vue 使用外部JS 概要 在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js，然后进行使用。 实现方法 我们在开发的...
使用vue实现HTML页面生成图片的方法
10-15
主要介绍了使用vue实现HTML页面生成图片的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 使用原生组件上传图片的实例
10-14
主要介绍了vue 使用原生组件上传图片的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
HTML 建立列表——列表标签
yuxingwu9872的博客
05-06 375
定义列表标题;<dd>定义列表内容;说明:1. dt和dd对应着的, 一个dt可以对应着多个dd;2. dd完全是为了dt服务的, 对标题进行描述;<dl><dt>标题1</dt><dd>内容11</dd><dd>内容12</dd><dt>标题2内容21</dd><dd>内容22
jquery项目 html使用export import方式调用模块
最新发布
LlanyW的专栏
05-06 175
jquery的老项目，引入vue3, 需要方便使用export, import方式引用一些常用的方法与常量。
用html画一个四叶草
liulang68的博客
04-20 2419
以上是部分代码，需要请看主页加联系方式。
vue3 tailwindcss使用保姆级教程
05-25
Vue3 和 Tailwindcss 都是现代化的前端技术，它们的结合可以让开发者更加高效地开发出优雅、精美的 UI 界面。下面是一份保姆级教程，帮助您快速上手 Vue3 和 Tailwindcss。 ## 1. 安装 Vue3 在使用 Vue3 之前，我们需要先安装 Vue3。 可以通过以下命令来安装最新版本的 Vue3： ```bash npm install vue@next ``` ## 2. 创建 Vue3 项目 在安装完 Vue3 之后，我们需要通过 Vue3 CLI 创建一个新的项目。在命令行中输入以下命令： ```bash vue create my-project ``` 这个命令将创建一个名为 `my-project` 的新项目，并自动安装所需的依赖项。 ## 3. 安装 Tailwindcss 接下来，我们需要安装 Tailwindcss。可以通过以下命令安装： ```bash npm install tailwindcss ``` ## 4. 配置 Tailwindcss 安装好 Tailwindcss 之后，我们需要进行一些配置才能在 Vue3 项目中使用。 首先，我们需要在项目的根目录下创建一个 `tailwind.config.js` 文件，用于配置 Tailwindcss。可以使用以下命令创建： ```bash npx tailwindcss init ``` 然后，打开 `tailwind.config.js` 文件，找到并修改以下配置： ```js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [], } ``` 将 `purge` 字段设置为 `['./src/**/*.{js,jsx,ts,tsx,vue}']`，用于在构建时删除未使用的样式。这个配置可以有效减小最终构建的文件大小。 ```js module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx,vue}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [], } ``` ## 5. 集成 Tailwindcss 到 Vue3 项目中 接下来，我们需要将 Tailwindcss 集成到 Vue3 项目中。 打开 `main.js` 文件，添加以下代码： ```js import { createApp } from 'vue' import App from './App.vue' import './index.css' createApp(App).mount('#app') ``` 这段代码将 `index.css` 文件导入到 Vue3 项目中。 然后，我们需要在 `index.css` 文件中导入 Tailwindcss 样式。可以使用以下命令将样式导入到 `index.css` 文件中： ```bash npx tailwindcss-cli@latest build -o ./src/index.css ``` 这个命令将会在 `./src/index.css` 文件中生成所有的 Tailwindcss 样式。 最后，我们需要在 `App.vue` 文件中使用 Tailwindcss 样式。打开 `App.vue` 文件，修改 `<template>` 标签中的内容： ```html <template> <div class="bg-gray-100 p-4"> <h1 class="text-2xl font-bold mb-4">Hello World!</h1> <p class="text-gray-600">This is a Vue3 project with Tailwindcss.</p> </div> </template> ``` 这个修改将会在页面中显示一个灰色背景，一个标题和一段文字。 ## 6. 运行 Vue3 项目 现在，我们已经完成了 Vue3 和 Tailwindcss 的集成。可以通过以下命令来启动 Vue3 项目： ```bash npm run serve ``` 然后打开浏览器，访问 `http://localhost:8080/`，就可以看到页面中显示的内容了。 至此，我们已经完成了 Vue3 和 Tailwindcss 的集成。希望这份保姆级教程能够帮助您快速上手 Vue3 和 Tailwindcss。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海豹先生_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值