在 HTML 中引入 vue.js 写页面

最新推荐文章于 2024-05-09 09:54:24 发布

Start2019

最新推荐文章于 2024-05-09 09:54:24 发布

阅读量1.7w

点赞数 14

分类专栏： html相关问题

本文链接：https://blog.csdn.net/Start2019/article/details/103403001

版权

html相关问题专栏收录该内容

5 篇文章 3 订阅

订阅专栏

突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 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.woff 和 fonts/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浏览器中不显示。

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

Start2019

关注

14
点赞
踩
75

收藏

觉得还不错? 一键收藏
12
评论
在 HTML 中引入 vue.js 写页面

突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 vue 熟悉那么一丢丢。但是没办法鸭，只能硬着头皮去做了！在这里做一下笔记。一、前期准备1. 新建文件夹，并且命名为： css、imgs、pages、js，在对应的文件夹下放对应的文件。2. 引入样式。不想要自己写样式和逻辑，而且是要基于 vue 的，那就只好找基于 vue 的 UI 库了—— e...
复制链接

扫一扫