Vue项目中引入第三方已做好的H5游戏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue项目中引入第三方已做好的H5游戏相关的知识，希望对你有一定的参考价值。
参考技术A Vue网站项目中，需要引入第三方已做好的H5游戏方法一，对游戏做单页重构；
方法二，利用static文件夹的特性，直接引入整个H5游戏。
方法一，重构涉及的工作量大，而且对于H5游戏和其挂载的网站项目本身来讲，H5游戏一般是独立的页面，极少和其挂载的网站项目本身有共用组件，所以没必要合并入单页中。
方法二，将游戏部署在vue项目static文件夹中，在主项目为H5游戏做一个索引链接组件，点击时跳转到static文件夹的游戏文件就好。
1，我们来看一下vue项目打包前后的文件目录结构，可以发现开发环境中static目录中的文件被原封不动的放进生产dist文件中的static文件夹中，而且static文件夹和主index.html是同级的，所以我们可以直接把做好的H5游戏文件直接放入static文件夹中以待访问：
2，在vue项目中建立一个game.vue文件，作为game跳转的索引，跳转地址写法为：
这里说明一下目录结构，打包后的vue项目，index.html和static文件夹同级，所以开头为./static.....
此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址： https://github.com/tom-wong666/xiaoa.git
vue elementui 引入第三方icon iconfront
elementui框架自带icon在开发大型前端应用时显得捉襟见肘。淘宝开源的iconfront的图标库上有很多优秀的icon图标。elementui支持整合iconfront到应用中，步骤如下：
- 首先需要在iconfront注册登陆，新建项目，然后把心仪的icon添加到项目中。
) - 接下来有两种做法，一种是在线链接，一种是下载解压后拷贝到本地的项目。
- 在线链接方式如下
新建一个iconfont.css文件，添加如下内容，el-icon-ali是第一步新建项目时给定的icon名前缀。
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}接下来将iconfront项目提供的在线链接添加到vue项目的index.html中
<!DOCTYPE html>
<html>
<head>
...
<link>
</html rel="stylesheet" href="//at.alicdn.com/t/font_1100946_7gqmadkiso5.css
">在vue项目中的main.js中import刚才创建的iconfront.css
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)添加新icon时，只要更新index.html中的链接即可
- 下载导入方式
解压下载出所有文件，拷贝到vue适当目录中，找到iconfront.css文件，一样添加如下内容
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}接下来只要在vue项目中的main.js中import刚才创建的iconfront.css即可
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)以上是关于Vue项目中引入第三方已做好的H5游戏的主要内容，如果未能解决你的问题，请参考以下文章