做电商网站哪里好,wordpress信用卡支付宝,合肥市建设工程合同备案网站,重庆装修公司有哪些突然说要写两个页面#xff08;只有两个页面#xff0c;不是一个完整的项目。。#xff09;#xff0c;有点懵#xff0c;不知道从哪下手#xff0c;而且只对 vue 熟悉那么一丢丢#xff0c;其他框架不是很熟悉。但是没办法鸭#xff0c;只能硬着头皮去做了#xff01…突然说要写两个页面只有两个页面不是一个完整的项目。。有点懵不知道从哪下手而且只对 vue 熟悉那么一丢丢其他框架不是很熟悉。但是没办法鸭只能硬着头皮去做了在这里做一下笔记。
一、前期准备
1. 新建文件夹并且命名为 css、imgs、pages、js在对应的文件夹下放对应的文件。
2. 引入样式。
不想要自己写样式和逻辑还想要用到 vue 那就只好找基于 vue 的 UI 库了—— elementUI而且在 elementUI 的安装这里有教程教你怎么去引用 element 和 vue。
!DOCTYPE html
html
headmeta charsetUTF-8!-- import CSS --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
/head
bodydiv idappel-button clickvisible trueButton/el-buttonel-dialog :visible.syncvisible titleHello worldpTry Element/p/el-dialog/div
/body!-- import Vue before Element --script srchttps://unpkg.com/vue/dist/vue.js/script!-- import JavaScript --script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el: #app,data: function() {return { visible: false }},methods:{//在这里写方法}})/script
/html3. 下载文件并用相对路径引用资源。
在上面给了俩地址最好把对应的文件下载下来并且保存到自己的文件夹里面。
1element.css : https://unpkg.com/element-ui/lib/theme-chalk/index.css
2vue.js : https://unpkg.com/vue/dist/vue.js。或去vue官网自行下载开发时下载开发版本330kb左右开发完成可以换成生成版本大约33kb
3element.js :https://unpkg.com/element-ui/lib/index.js
4. 修改资源路径
上面的工作做完以后将绝对路径改为相对路径。比如
link relstylesheet 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?t1472440741) format(woff), url(fonts/element-icons.ttf?t1472440741) format(truetype);这就需要我们有个 fonts 文件夹除此之外在这个文件夹下还需要 element-icons.woff 和 element-icons.ttf 两个文件。
还需要注意的是版本要相同不同版本也会导致 icon 错乱错号显示成箭头甚至不显示显示为小方块 1element-icons.woff https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff
2element-icons.ttf https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf
3不知道自己引入的 element 的版本 根据前面引入 element 的 css 文件时的路径判断。比如说
我在前面引入的 element 的 css 是根据 link relstylesheet hrefhttps://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?ID12345)
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});具体的使用官网上有详细讲就不再贴代码了。
做到这里就差不多结束了因为只有两个页面也就没有用 vue-router 直接用的 a 标签去跳转的页面。 还有需要注意的地方这样写完以后IE 浏览器不兼容具体的可以看我上一篇的博客——HTML引入vue.js在ie浏览器中不显示。
最后的结构大致长成下面这个样纸~
