在 HTML 中引入 vue.js 写页面

article/2025/11/10 2:44:59

突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 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);
});