html 本地引入vue+element+axios 开发复杂页面

3,329 阅读1分钟

一,需求产生

公司要做一个html页面,这个页面功能挺复杂的,用到了 滑动条,省份联动,单选框组等等。首先想到了,jq+bootstrap去实现,环境都搭建好了,感觉以后处理数据,代码太繁杂,vue双向绑定不香吗,开发也快。我因为就一个HTML页面,所以不搭建框架了。

二,搭建开发环境

我不想cnd 引入vue + element, 我直接下载到本地了,先建三个文件夹,css,js,pages

下载 以下文件(千万不要 用 粘贴复制方法下载这下面文件,因为粘贴复制大小有限制,可能会漏掉代码)

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

引入好 vue.js,element.js,element.css,然后运行 汇报以下错误

意思 在 fonts 文件夹 找不到 element-icons.ttf 和 element-icons.woff,解决办法 到element官方源代码内找到  fonts 文件夹 里 element-icons.ttf 和 element-icons.woff,然后下载到本地 路径为 element-ui > lib > theme-chalk 

引入完成 试一下, 也能验证,美滋滋

在开发项目的时候,免不了使用 es6 语法,然后处理一下

<script src="../js/polyfill.min.js">
</script><script src="../js/browser.min.js"></script>

1\.  https://cdn.polyfill.io/v2/polyfill.min.js
2\.  https://unpkg.com/babel-standalone@6.15.0/babel.min.js

方法的使用

大概就是这些,  有什么不对,和优化的地方请大家指出,相互学习一下