桃宝护卫队 2023-05-26 14:08 采纳率: 75%
浏览 38
已结题

如何直接在html中使用vue，就是说不做工程化

如何直接在html中使用vue，就是说不做工程化
以下再一个html

<div id="app">
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="handleClick">点击</el-button>
    <p>{{message}}</p>
  </div>
  • 写回答

1条回答 默认 最新

  • 27-1994 2023-05-26 14:17
    关注

    以下代码保存到html文件中，直接执行应该就是你要的了

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue2+ElementUI Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="handleClick">点击</el-button>
    <p>{{message}}</p>
  </div>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: '',
        message: ''
      },
      methods: {
        handleClick() {
          this.message = '你输入的内容是：' + this.inputValue
        }
      }
    })
  </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • 【前端学习指南】第二站 Vue 工程化开发
    2024-11-11 23:50
    爱吃糖的范同学的博客 使用 Vue CLI 的好处就在于不用再对 Webpack 进行配置，拿来安装即可使用，快速创建一个可以使用的 Vue 工程，直接就能上手开发项目。组件化是指将一个页面拆分成一个个组件，每个组件有自己独立的结构、样式、行为...
  • 使用webpack+vue.js构建前端工程化
    2018-06-12 10:17
    我是楠楠的博客 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点：node.jsvue.jswebpack前端工程化本篇不是写给零基础的同学看的，读者应具备一些服务器开发、前端开发基础本篇目标使用webpack+vue.js构建前端工程化本篇...
  • 【Vue实战教程】之Vue工程化项目详解
    2024-07-23 15:16
    柯晓楠的博客 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。...遍历源文件 > 匹配规则 > 打包这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。
  • Vue:vue的工程化
    2024-04-24 20:03
    0cfjg0的博客 即前端人员开发前端工程,将开发好的前端工程打包部署在前端服务器上后端开发人员开发后端工程,再将后端工程打包部署在后端服务器上,这种模式称为前后端分离开发而前后端要顺利对接的关键就是要遵循一定的开发规范。
  • 第十八天 Vue-前端工程化总结
    2023-03-20 08:55
    HuanLe.的博客 前端api管理工具Yapi、Vue-cli安装与使用、Vue组件库ElementUI
  • Web开发—Vue工程化
    2025-05-11 21:59
    咚仔的博客 首先，Vue是一款用于构建用户界面的渐进式JavaScript框架，企业开发中更注重前端工程化，包括模块化、组件化、规范化和自动化。接着，文章详细说明了如何使用Vue官方提供的脚手架工具create-vue来创建工程化的Vue...
  • vue3通过Vite实现工程化
    2024-06-03 12:17
    凊野的博客 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:Vue.js - 渐进式 JavaScript 框架 | Vue.js​
  • vue前端工程自动化
    2021-11-22 11:37
    沫熙瑾年的博客 比如 我们封装了很多的方法.js 对应很多js文件 然后在页面里面使用的时候 是不是要全部都一个一个的引入 很多人认为 方法都放在一个js文件里面 不需要很多 其实 正常来说 是根据功能来划分的 比如 权限 导入导出 ...
  • Vue基础知识总结 11：前端路由vue-router
    2021-10-13 07:32
    哪 吒的博客 三、安装和使用vue-router 1、安装vue-router npm install vue-router --save 2、在模块化工程中使用它（因为它是一个插件，所以可以通过Vue.use()来安装路由功能） 导入路由对象，并且调用Vue.use(VueRouter) 创建...
  • 前端工程化-自动生成vue页面
    2021-07-15 15:10
    前端江太公的博客 在views文件夹下面新建一个文件夹，用来存放新页面的.vue文件。 需要在routes.js文件里面新添加一个路由。 按照上述操作以后，才可以正常访问新添加的页面，之后才开始对新页面进行正常开发。但是这样的机械化步骤...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 6月3日
  • 已采纳回答 5月26日
  • 创建了问题 5月26日