精华内容
下载资源
问答
  • HTML 中引入 vue.js 写页面

    千次阅读 热门讨论 2019-12-05 15:00:04
    突然说要写两个页面(只有两个页面,不是一个完整的项目。。),有点懵,不知道从哪下手,而且只对 vue 熟悉...2. 引入样式。 不想要自己写样式和逻辑,而且是要基于 vue 的,那就只好找基于 vue 的 UI 库了—— e...

    突然说要写两个页面(只有两个页面,不是一个完整的项目。。),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢,其他框架不是很熟悉。但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记。

    一、前期准备

    1. 新建文件夹,并且命名为: css、imgs、pages、js,在对应的文件夹下放对应的文件。

    2. 引入样式。

    不想要自己写样式和逻辑,还想要用到 vue ,那就只好找基于 vue 的 UI 库了—— elementUI,而且在 elementUI 的安装这里有教程,教你怎么去引用 element 和 vue。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
      <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
          <p>Try Element</p>
        </el-dialog>
      </div>
    </body>
      <!-- import Vue before Element -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- import JavaScript -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return { visible: false }
          },
          methods:{
          	//在这里写方法
          }
        })
      </script>
    </html>
    

    3. 下载文件,并用相对路径引用资源。

    在上面给了俩地址,最好把对应的文件下载下来,并且保存到自己的文件夹里面。

    (1)element.css : https://unpkg.com/element-ui/lib/theme-chalk/index.css

    (2)vue.js : https://unpkg.com/vue/dist/vue.js。或去vue官网自行下载(开发时下载开发版本,330kb左右;开发完成可以换成生成版本,大约33kb)

    (3)element.js :https://unpkg.com/element-ui/lib/index.js

    4. 修改资源路径

    上面的工作做完以后,将绝对路径改为相对路径。比如:

    <link rel="stylesheet" href="../css/element.css">
    <script src="../js/vue.js"></script>
    


    二、书写样式,写页面

    前期准备工作完成以后,就可以开始写页面了。这里有几个小坑需要注意一下:

    1. 引用资源路径。

    除了引用 css 和 js 之外,还有图片路径,路径最好写成:<img src="../imgs/xxx.png"/>千万不要省事写成根路径下。写在根路径下,这两页面部署的时候会找不到图片的。
    同样的,上面引入 css 和 js 文件的时候也需要注意。

    啥是根路径???就是:<img src="/imgs/xxx.png">

    2. 下载 element.css 后,小图标找不到了。

    关于这个问题,是因为下载 element.css 中有这样一行代码:

    src: url(fonts/element-icons.woff?t=1472440741) format('woff'), url(fonts/element-icons.ttf?t=1472440741) format('truetype');
    

    这就需要我们有个 fonts 文件夹,除此之外,在这个文件夹下还需要: element-icons.woff 和 element-icons.ttf 两个文件。

    还需要注意的是:版本要相同,不同版本也会导致 icon 错乱(错号显示成箭头)甚至不显示(显示为小方块)
    (1)element-icons.woff: https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff

    (2)element-icons.ttf: https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf

    (3)不知道自己引入的 element 的版本??
    根据前面引入 element 的 css 文件时的路径判断。比如说:

    我在前面引入的 element 的 css 是根据 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 这个路径下载的,那么我引入小图标这两个文件时,把这个路径的 index.css 分别改为 fonts/element-icons.wofffonts/element-icon.ttf ,然后在浏览器的地址栏上打开这个链接,就可以自动下载了。

    (4)想知道为什么下载 woff 和 ttf 这两个文件时,要在路径上加上 fonts/ ?

    看官网。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    打开它就能发现 woff 和 ttf 这两个文件了,点击这两个文件也可以进行下载。



    三、请求数据

    既然用了 vue 和 elementUI,那么请求数据首先就选 axios。 axios官网

    1. 下载 axios.js 文件,放到 js 文件中,用相对路径引入到项目中。
    axios.js : https://unpkg.com/axios/dist/axios.min.js

    2. 使用:

    //post请求
    axios.post('/user', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }).then(function (res) {
      console.log(res);
    })
    .catch(function (error) {
      console.log(error);
    });
    
    //get请求
    axios.get('/user?ID=12345')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
    

    具体的使用,官网上有详细讲,就不再贴代码了。

    做到这里就差不多结束了,因为只有两个页面,也就没有用 vue-router 直接用的 a 标签去跳转的页面。
    还有需要注意的地方:这样写完以后,IE 浏览器不兼容,具体的可以看我上一篇的博客——HTML引入vue.js,在ie浏览器中不显示

    最后的结构大致长成下面这个样纸~
    在这里插入图片描述

    展开全文
  • Vue第二篇之在HTML中引入Vue.js,快速使用Vue

    万次阅读 多人点赞 2018-10-16 11:19:27
    直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。 下载vue.js 地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入v...

    对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

    先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

    下载vue.js  地址:https://download.csdn.net/download/qq_31122833/10723310,下载完之后在HTML中加入vue.js包。

    <script src="${path}/web/constant/vue.js"></script>

     在当前html中,写入js代码:

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data: {
                message:'hello vue.js.'
            }
        });
    </script>

    html中,加入如下代码:

    <h1>Vue demo</h1>
        <div id="app">
        <div>{{message}}</div>
        <input type="text" v-model="message">
    </div>
    

    修改文本框中的内容,可以看到文本框上方的内容也在相应改变;这就是vue的双向绑定。

    展开全文
  • 第一种可能出现原因就是引入的静态文件src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的...
  • 在html中引入vue+elementui及遇到的问题

    千次阅读 2020-07-19 14:03:32
    在html中引入vue+elementui及遇到的问题 引入elementui控件时,比如DateTimePicker,出现如下图所示。并报Maximum call stack size exceeded

    引入方法:

     <!--引入 element-ui 的样式,-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- import Vue before Element -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    使用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!--引入 element-ui 的样式,-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- import Vue before Element -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>
        <div id="picker">
            <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
            </el-date-picker>
        </div>
    </body>
    <script>
         new Vue({
             el:"#picker",
             data() {
                 return {
                    value1:""
                 }
             }
         })
    </script>
    </html>

    遇到的问题:

    在引入elementui控件时,比如DateTimePicker,出现如下图所示。并报Maximum call stack size exceeded

     

    问题原因:引入的vue文件不是最新的,解决方法:去官网引用最新版的vue.js

    展开全文
  • 一、创建项目时引入 1.新建vue项目 2.添加代码 <body> <div id="app">{{aaa}}</div> </body> <script> new Vue({ el:'#app', data:{ aaa:'Hello Vue.js !' }...

    一、创建项目时引入

    1.新建vue项目
    创建项目时引入
    2.添加代码

    <body>
    	<div id="app">{{aaa}}</div>
    </body>
    <script>
    	new Vue({
    		el:'#app',
    		data:{
    			aaa:'Hello Vue.js !'
    		}
    	})
    </script>
    

    二、下载官方的vue.min.js文件

    1.点击进入官方文件
    2.引入vue.min.js文件

    <script src="./js/vue.min.js"></script>
    

    3.添加代码

    <body>
    	<div id="app">{{aaa}}</div>
    </body>
    <script>
    	new Vue({
    		el:'#app',
    		data:{
    			aaa:'Hello Vue.js !'
    		}})
    </script>
    
    展开全文
  • HTML开发 h5引入vue和Swiper

    千次阅读 2020-02-29 16:10:16
    组长说简单的静态可以使用HTML引入vue来写。实际操作的时候,遇到了问题,就是里面用了Swiper,直接把vue里面写好的代码拿过来,Swiper不起作用;搞了好久,终于vue-awesome-swiper的GitHub上看到了一段栗子,尝试...
  • html页面引入vue组件

    千次阅读 2020-09-08 11:30:13
    html页面引入vue组件需要页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接本地打开index.html,会有跨域问题,可以本地配置一个nginx转发,再用浏览器访问...
  • 首先这两种方式都可以使用vue.js。...等到应用需要越来越多的前端库和前端框架的时候,一个一个在HTML文件中引入会很不方便。 然后直接使用Vue命令,会使用webpack工具,创建项目,前端构建工具会让前端开发更加高效。
  • html页面引入vue

    千次阅读 2020-08-11 12:35:35
    基础环境 ①所需的基本ui组件 ...可以无需脚手架情况下对vue以脚手架形式编写vue文件,同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.
  • html页面基于script标签引入vue使用时,将此js放在项目路径引用即可离线使用vue框架,避免在线引用网络延迟。 具体使用方法可参考我的博客
  • HTML引入vue.js,ie浏览器不显示

    千次阅读 热门讨论 2019-12-03 13:00:59
    因为只有两个页面,所以我没有用 vue-cli 搭框架,直接 HTML 中引入vue.js 文件。发现其他浏览器都能正常显示,ie 下显示不正常,而且还报错,错误信息如下: 原因: 主要是因为 ie 不支持 ES6 的语法。 vue-...
  • 在HTML中使用Vue.js

    千次阅读 2020-01-31 14:04:00
    非前后端项目做页面时, 现在时常是只由后端人员一手开发, 在html或ftl文件写js和 jquery总是令后端开发者如鲠在喉, 此时若能引入vue或者angular将极大提升开发效率(一般来说都会允许引入, 但博主也见过比较...
  • html引入vue组件,vue组件使用echarts

    千次阅读 2020-03-10 11:18:11
    将图设置代码写在vue的methods,然后mounted中调用 得到echarts图 <div id="pushed" style="width: 630px;height:300px;float: left;margin-right:30px"></div> var myChart = echarts.init...
  • 一、在vue中使用scss 首先进行安装如下依赖:  cnpm i sass-loader node-sass -D 二、vue中引入样式文件 1)index.html模板html文件中引入,这种方式引入的原样编译生成的html文件中,如果想要通过link引入...
  • html 引入 vue.js

    千次阅读 2020-06-13 23:01:21
    html 引入 vue.js 1 vue官网 下载 vue.js 目录结构 编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • HTML文件引入Vue开发

    千次阅读 2019-11-23 17:35:28
    HTML文件引入Vue开发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题</title> <script src=...
  • .html页面引入vue并使用公共组件

    万次阅读 热门讨论 2019-09-10 14:26:59
    问题描述: 整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <...公共部分写 .js 文件里,本质就是当前页面写的公共组件,组件规则遵从vue的组件规则。 temp...
  • jsp项目如何引入vue

    千次阅读 2020-11-11 20:18:31
    后来加了个考试的新功能,果断引入vue和element,还有polyfill.js,因为要兼容IE9。 刚开始写的时候vue和elememt都是引的cdn上的资源,但是我们项目只能使用内网,所以需要将vue和element下载到本地。从线上转到本地...
  • 开箱即用 - 在vue中引入.html文件并渲染的使用总结 1.业务需求: 最近项目中遇到了一个需求,vue的模版中引入外部的HTML文件(这个HTML文件是后端生成的),并且渲染出来。 2.需求分析: 在vue中引入.html...
  • html页面引入vue组件之http-vue-loader.js

    千次阅读 2021-04-05 21:13:16
    首先这种方法不推荐,日常工作也不会在html里面引入一个vue文件,只是为了有时候方便测试才会这么做 1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </...
  • 在vue项目中引入typescript,vue + ts

    千次阅读 2020-08-20 10:38:44
    在vue项目中引入typescript,vue + ts一、typescript是什么?二、使用步骤1.引入库2.项目使用总结 一、typescript是什么? TypeScript是 的强类型版本。然后编译期去掉类型和特有语法,生成纯粹的 代码。由于...
  • html中创建vue组件及引用

    千次阅读 2020-09-30 17:17:48
    html中创建vue组件及引用 需要的js文件 组件vue文件的代码 <template> <div class="person-infor" @click="addressClick"> <div class="address-wrap" v-if="!data.address_str"> <p>...
  • html页面直接引入vue.js,并用运用

    千次阅读 2020-05-13 18:49:17
    HTML <divid="app"> {{msg}} </div> JS <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <script> window.onload=function(){ newVue({ el:'#app', ...
  • 在HTML文件使用VUE组件

    千次阅读 2020-10-20 01:05:36
    本文的目的是学习如何在html中使用vue组件。主要内容是使用组件以有序列表的形式展示数组的数据。主要知识点有htmlvue,v-for指令,js等等。
  • 之所以要做这个是因为,一个组件内部需要引入一个js文件来定位。如果放在index.html,这样每个组件都会有这个js。所以需要组件内单独引入。 第一种操作 Dom引入js: export default { mounted() { const s = ...
  • 最近项目遇到了一个需求,就是要在vue项目引用后台指定的HTML页面和一些外部的js文件,并在vue项目使用,下面就记录一下吧。 1、引入外部 js 文件 util.js文件封装一个工具函数,专门用来引入外部 js ...
  • 开始我们需要导入我们的vue组件的路径到我们当前的js文件目录 然后我们需要用到一个函数render进行渲染,...接着我们需要.html文件进行引入我们.js文件 <script src="./webapp/static/dist/custom.js"></s

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,805
精华内容 34,722
关键字:

在html中引入vue

vue 订阅