mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
48 lines
1.9 KiB
Vue
48 lines
1.9 KiB
Vue
<template>
|
||
<div>
|
||
<h2>npm install</h2>
|
||
<p class="tip">
|
||
<a class="link" href="https://github.com/xuliangzhan/vxe-table-demo" target="_blank">安装指南</a><br>
|
||
推荐使用 npm 的方式安装，它能更好地和 <a class="link" href="https://webpack.js.org/">webpack</a> 打包工具配合使用。<br>
|
||
依赖库： <a class="link" href="https://www.npmjs.com/package/xe-utils">xe-utils2.2+</a> <a class="link" href="https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D">vue2.6+</a><br>
|
||
<span class="red">（注：如果是 IE 浏览器可以使用 <a class="link" href="https://www.npmjs.com/package/babel-polyfill">babel-polyfill</a> 来解决兼容性问题）</span>
|
||
</p>
|
||
<pre>
|
||
<code class="shell">
|
||
npm install xe-utils vxe-table
|
||
</code>
|
||
<code class="javascript">
|
||
import Vue from 'vue'
|
||
import 'xe-utils'
|
||
import VXETable from 'vxe-table'
|
||
import 'vxe-table/lib/index.css'
|
||
|
||
Vue.use(VXETable)
|
||
</code>
|
||
</pre>
|
||
<h2>CDN</h2>
|
||
<p class="tip">可以通过 <a class="link" href="https://unpkg.com/vxe-table/">unpkg</a> 或 <a class="link" href="https://cdn.jsdelivr.net/npm/vxe-table/">cdnjs</a> 获取到最新版本的资源，并在页面上引入即可</p>
|
||
<pre>
|
||
<code class="xml">
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
|
||
<!-- 引入脚本 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import hljs from 'highlight.js'
|
||
|
||
export default {
|
||
mounted () {
|
||
Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
|
||
hljs.highlightBlock(block)
|
||
})
|
||
}
|
||
}
|
||
</script>
|