非前后端分离,引入 ElementUI 方法

本文介绍了在非前后端分离的项目中如何手动引入ElementUI的详细步骤,包括从指定URL下载所需的vue.js、element.js、element.css及图标文件,将文件放置到正确目录,并修改CSS中@font-face的图标路径,以解决图标无法显示的问题。
摘要由CSDN通过智能技术生成

非前后端分离,引入 ElementUI 方法

1. 下载文件

vue.js
element.js
element.css
element-icons.ttf
element-icons.woff

目前,比较流行使用npm管理、安装,开发前后端分离项目,但是这次需要本地单项目引用,所以需要去特定位置下载,对应资源文件

  • vue 在官网即可下载,选择压缩与否都可以
  • element 资源下载
    打开 https://unpkg.com/browse/element-ui@2.11.1/
    这里版本自己选择,我选择的版本是 2.11.1 只要都对应即可
  • element-ui/lib 目录下,下翻找到 index.js 这就是element 全部的 js,这里打开 View Raw,全选复制,在本地创建一个 js 文件,命名 element.js
  • element-ui/lib/theme-chalk 目录下,同样的方式保存 index.css 命名 element.css
  • element-ui/lib/theme-chalk/fonts 目录下,同样的方式保存 element-icons.ttf element-icons.woff 命名如上

2. 放入对应文件夹

注意层级结构

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值