@ajaxjs/ui 1.1.9 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ajaxjs/ui",
-  "version": "1.1.9",
-  "description": "real ajaxjs ui library",
+  "version": "1.2.0",
+  "description": "Real ajaxjs ui library",
   "main": "dist/index.js",
   "types": "dist/libs/common.d.ts",
   "homepage": "https://framework.ajaxjs.com/",
@@ -23,7 +23,7 @@
   "author": "sp42 <sp42@qq.com>",
   "license": "Apache License 2.0",
   "files": [
-    "dist/"
+    "dist/", "src"
   ],
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <router-view />
+  
+</template>
+
+<script>
+export default {
+  created() {
+    // window.config = { dsApiRoot: 'http://127.0.0.1:8080/entity' };
+    window.config = { dsApiRoot: '/entity' };
+    document.title = "Demo Page";
+  }
+}
+</script>

package/src/index.ts

@@ -0,0 +1,50 @@
+import * as util from './util/utils';
+import { setBaseHeadParams } from './util/xhr';
+import { xhr_get, xhr_post, xhr_put, xhr_del } from './util/xhr';
+
+import OpacityBanner from "@/widget/OpacityBanner.vue";
+import ProcessLine from "@/widget/ProcessLine.vue";
+import AccordionMenu from "@/widget/AccordionMenu.vue";
+import Expander from "@/widget/Expander.vue";
+import HtmlEditor from "@/widget/HtmlEditor/HtmlEditor.vue";
+import FileUploader from "@/widget/FileUploader/FileUploader.vue";
+import Calendar from "@/widget/calendar/Calendar.vue";
+import Article from '@/widget/Article.vue';
+
+/**
+ * API 统一前缀
+ */
+let API_BASE_URL: string;
+
+/**
+ * 暴露各个组件
+ */
+export default {
+    /**
+     * 设置 API 统一前缀
+     * 
+     * @param perfix API 统一前缀
+     */
+    setApiBaseUrl(perfix: string): void {
+        API_BASE_URL = perfix;
+    },
+
+    /**
+     * 获取 API 统一前缀
+     * 
+     * @returns API 统一前缀
+     */
+    getApiBaseUrl(): string {
+        return API_BASE_URL;
+    },
+
+    setBaseHeadParams,
+
+    util: util,
+
+    xhr: {
+        xhr_get, xhr_post, xhr_put, xhr_del
+    },
+
+    OpacityBanner, ProcessLine, AccordionMenu, Expander, Article, HtmlEditor, FileUploader, Calendar
+};

package/src/main.ts

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import '@/style/reset.less';
+// import '@/style/common-functions.less';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app');

package/src/pages/calendar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="home">
+    <h2>日历控件</h2>
+
+    <p>
+      开门见山，先说明一下这日历组件的核心算法不是笔者原创的，而是来自于早期<a href="https://www.cnblogs.com/cloudgamer/articles/1274459.html" target="_blank">大神
+      cloudgamer 的作品</a>，在这里向前辈致敬！ 组件本身的原理不算复杂难懂，也就寥寥
+      140 行代码（原 JavaScript），足以展现日历渲染的原理。
+    </p>
+    <p>
+      <a
+        href="https://blog.csdn.net/zhangxin09/article/details/89681010"
+        target="_blank"
+        >查看教程</a
+      >
+    </p>
+    <p>
+      <Calendar style="margin:20px auto;" @pickdate="showDate" />
+    </p>
+  </div>
+</template>
+<script>
+import Calendar from "@/widget/calendar/Calendar.vue";
+
+export default {
+  components: { Calendar },
+  methods:{
+    showDate(date) {
+        alert(date);
+    }
+  }
+};
+</script>

package/src/pages/form.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="home">
+    <h2>表单</h2>
+    <p>表单的问题主要是表单布局和表单验证两个。</p>
+    <form class="aj-form">
+      <table class="aj-form-table">
+        <tr>
+          <td>昵称</td>
+          <td><input type="text" name="name" value="Jack" /></td>
+          <td>真实姓名</td>
+          <td><input type="text" name="realname" value="" /></td>
+        </tr>
+        <tr>
+          <td>性别</td>
+          <td>
+            <label><input type="radio" name="gender" value="1" /> 男</label>
+            <label><input type="radio" name="gender" value="2" /> 女</label>
+            <label><input type="radio" name="gender" value="0" /> 未知</label>
+          </td>
+          <td>生日</td>
+          <td><input type="text" name="phone" value="" /></td>
+        </tr>
+        <tr>
+          <td>电话</td>
+          <td><input type="text" name="phone" value="" /></td>
+          <td>Email</td>
+          <td><input type="text" name="email" value="" /></td>
+        </tr>
+        <tr>
+          <td>地区</td>
+          <td colspan="3">
+            <input type="text" name="location" value="" />
+          </td>
+        </tr>
+        <tr>
+          <td>租户</td>
+          <td>
+            <select style="width: 180px; margin: 10px 0">
+              <option value="${item.id}">${item.name}</option>
+            </select>
+          </td>
+          <td>组织</td>
+          <td></td>
+        </tr>
+      </table>
+      <div class="aj-btnsHolder">
+        <button>提交</button> <button>复位</button>
+      </div>
+    </form>
+    <h2>文件上传</h2>
+    <FileUploader action="ddfdsf" style="margin: 0 auto" />
+  </div>
+</template>
+<script>
+import FileUploader from "@/widget/FileUploader/FileUploader.vue";
+import Calendar from "@/widget/calendar/Calendar.vue";
+
+export default {
+  components: { FileUploader, Calendar },
+};
+</script>
+
+<style lang="less" scoped>
+form {
+  width: 600px;
+  margin: 0 auto;
+}
+</style>

package/src/pages/html-editor.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="home">
+    <h2>HTML 编辑器</h2>
+    <p>HTML 编辑器，又叫富文本编辑器（Rich Text Editor），目的就是让用户可以在浏览器上编辑各种格式的文本，类似于 Word “即见即所得”那种可视化的特性，HTML 编辑器能直观地编辑文本并同时产生预期的效果。
+      不同的是 Word 最终成品是 *.doc 文件，而 HTML 编辑器的保存格式是 HTML。实际上，称为“富文本编辑器”或者更合适一些，盖因这类编辑器，最终的格式不一定是 HTML，可以被设计保存为 md（Markdown）或其他的格式。</p>
+    <p>
+      <a href="https://zhangxin.blog.csdn.net/article/details/113867893" target="_blank">查看教程</a>
+    </p>
+    <p>需要引入图标库；HTML 外层要有隐藏的 textarea 元素包裹着。</p>
+
+    <textarea style="display:none;">
+        <h2>什么是Lorem Ipsum?</h2>
+        <p>Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。它不仅延续了五个世纪，还通过了电子排版的挑战，其雏形却依然保存至今。在1960年代，”Leatraset”公司发布了印刷着Lorem Ipsum段落的纸张，从而广泛普及了它的使用。最近，计算机桌面出版软件”Aldus PageMaker”也通过同样的方式使Lorem Ipsum落入大众的视野。</p>
+
+        <h2>我们为何用它？</h2>
+        <p>无可否认，当读者在浏览一个页面的排版时，难免会被可阅读的内容所分散注意力。Lorem Ipsum的目的就是为了保持字母多多少少标准及平均的分配，而不是“此处有文本，此处有文本”，从而让内容更像可读的英语。如今，很多桌面排版软件以及网页编辑用Lorem Ipsum作为默认的示范文本，搜一搜“Lorem Ipsum”就能找到这些网站的雏形。这些年来Lorem Ipsum演变出了各式各样的版本，有些出于偶然，有些则是故意的（刻意的幽默之类的）。</p>
+    </textarea>
+
+    <HtmlEditor :v-model="v" style="width:800px;margin:0 auto" @on-change="v=$event" :is-ionicons="false" />
+
+    <br />
+    <br />
+    <h2>生成的 HTML 标签</h2>
+    <p>
+      {{v}}
+    </p>
+  </div>
+</template>
+
+<script>
+import HtmlEditor from "@/widget/HtmlEditor/HtmlEditor.vue";
+
+export default {
+  components: { HtmlEditor },
+  data() {
+    return {
+      v: "",
+    };
+  },
+  mounted() {
+    this.v = this.$el.querySelector("textarea").value;
+  },
+};
+</script>

package/src/pages/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="demo">
+    <menu>
+      <a href="#" @click="show = 'intro'">简介</a> |
+      <!-- <a href="#" @click="show = 'baseFn'">基础函数</a> | -->
+      <a href="#" @click="show = 'widget'">页面 widget</a> |
+      <a href="#" @click="show = 'form'">表单组件</a> |
+      <a href="#" @click="show = 'html-editor'">HTML 编辑器</a> |
+      <a href="#" @click="show = 'calendar'">日历选择器</a> |
+      <a href="#" @click="show = 'play-ground'">试验场</a>
+    </menu>
+    <table class="all-center" v-if="show == 'intro'">
+      <tr>
+        <td>
+          <h1>ajaxjs.js 前端组件库</h1>
+          <ul>
+            <li>
+              这是一个个人练手项目，组件不是很全，只有顶部导航列出那些。要求大而全的请参考
+              element/ant/iview
+            </li>
+            <li>
+              轻量级，原先打算做一个纯原生的 UI 库，啥都不依赖，后面入坑 vue 才只依赖 vue 2
+            </li>
+            <li>
+              简单易懂的代码，不折腾。当然了，是 typescript。不过我没有用 class 风格，只是加入参数类型、返回值类型，这就足够了
+            </li>
+            <li>CSS 基于 less.js</li>
+          </ul>
+          <p class="p">安装 npm i @ajaxjs/ui</p>
+
+          <p>
+            <a href="https://www.npmjs.com/package/@ajaxjs/ui">npm</a>
+            |
+            <a href="https://gitee.com/sp42_admin/ajaxjs/tree/master/aj-ui-widget/aj"
+            >源码</a>
+            |
+            <a
+              target="_blank"
+              href="//shang.qq.com/wpa/qunwpa?idkey=3877893a4ed3a5f0be01e809e7ac120e346102bd550deb6692239bb42de38e22"
+            >QQ 群：3150067</a>
+            |
+            <a href="mailto:frank@ajaxjs.com">Email</a> |
+            <a target="_blank" href="http://blog.csdn.net/zhangxin09">作者博客</a>
+            <center>©1999-2022 Frank Cheung</center>
+          </p>
+        </td>
+      </tr>
+    </table>
+
+    <DemoWidget v-if="show == 'widget'" />
+    <Form v-if="show == 'form'" />
+    <HtmlEditor v-if="show == 'html-editor'" />
+    <Calendar v-if="show == 'calendar'" />
+    <PlayGround v-if="show == 'play-ground'" />
+  </div>
+</template>
+
+<script>
+import DemoWidget from "./widgets.vue";
+import Form from "./form.vue";
+import HtmlEditor from "./html-editor.vue";
+import Calendar from "./calendar.vue";
+import PlayGround from "./play-ground.vue";
+
+export default {
+  components: { DemoWidget, Form, HtmlEditor, Calendar, PlayGround },
+  data() {
+    return {
+      show: "intro",
+    };
+  },
+};
+</script>
+
+<style lang="less">
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css";
+
+a {
+  color: gray;
+}
+a:hover {
+  color: black;
+}
+.demo {
+  font-size: 11pt;
+  menu {
+    margin: 0;
+    padding: 0;
+    line-height: 40px;
+    height: 40px;
+    // width: 300px;
+    text-align: center;
+    border-bottom: 1px solid lightgray;
+  }
+}
+
+table.all-center {
+  width: 100%;
+  font-size: 11pt;
+  td {
+    vertical-align: middle;
+    text-align: center;
+  }
+}
+
+h1 {
+  margin: 20px;
+}
+
+.home {
+  & > h2 {
+    margin: 30px auto;
+  }
+  & > h2,
+  & > p {
+    margin: 20px auto;
+    width: 600px;
+    text-align: justify;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+h1 {
+  margin: 30px;
+}
+
+ul {
+  max-width: 500px;
+  margin: 20px auto;
+  color: gray;
+  li {
+    text-align: left;
+    list-style-type: initial;
+    padding-bottom: 10px;
+  }
+}
+
+p.p {
+  .aj-text-function();
+  max-width: 500px;
+  margin: 20px auto;
+}
+
+center {
+  margin: 20px;
+  font-size: 9pt;
+  color: lightgray;
+}
+</style>

package/src/pages/play-ground.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="home">
+    <h2>Resize</h2>
+    
+    <Resize />
+  </div>
+</template>
+<script>
+import Resize from "@/widget/Resize.vue";
+
+export default {
+  components: { Resize },
+};
+</script>

package/src/pages/widgets.vue

@@ -0,0 +1,183 @@
+
+<template>
+  <div class="home">
+<!--     <h2>图片放大器</h2>
+    <div style="margin:0 auto;width:600px;text-align: center;">
+      <ImageEnlarger img-url="https://thebulletin.org/wp-content/uploads/2021/11/rosner-photo-1-150x150.jpg.webp" />
+      &nbsp;&nbsp;
+      <ImageEnlarger img-url="https://thebulletin.org/wp-content/uploads/2021/11/1280px-Construction_at_Vogtle_Nuclear_Plant-150x150.jpeg.webp" />
+    </div> -->
+
+    <h2>展开闭合器 expander</h2>
+    <p>常用于展开正文详情。提供过渡效果的图层，如果不需要把 div class="mask" 去掉即可。注意加入容器的 padding 会导致关闭时高度异常。</p>
+    <table class="aj-table" align="center">
+      <thead>
+        <tr>
+          <th>属性</th>
+          <th>含义</th>
+          <th>类型</th>
+          <th>是否必填，默认值</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>openHeight</td>
+          <td>展开状态的高度</td>
+          <td>Number</td>
+          <td>n, 200</td>
+        </tr>
+        <tr>
+          <td>closeHeight</td>
+          <td>闭合状态的高度</td>
+          <td>Number</td>
+          <td>n, 50</td>
+        </tr>
+        <tr>
+          <td><code>&lt;slot</code>&gt;</td>
+          <td>正文内容扩展</td>
+          <td>String</td>
+          <td>n</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <Expander :close-height="50" style="width: 300px;margin:5% auto;">
+      Lorem Ipsum，也称乱数假文或者哑元文本， 是印刷及排版领域所常用的虚拟文字。
+      由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书， Lorem Ipsum从西元15世纪起就被作为此领域的标准文本使用。
+      <div class="mask-layer"></div>
+    </Expander>
+
+    <h2>渐现 Banner</h2>
+    <p>原理上讲，就是为每张图片准备好定时器 timer，使其控制图片的透明度。当图片从透明度 0 到 100，就是渐现的过程； 与此同时，另外一张图片由透明度 100 下降到 0。这两个过程是同时发生的，一个渐现一个渐隐，便会造成如此的目标效果。</p>
+    <p><a href="https://zhangxin.blog.csdn.net/article/details/112055111" target="_blank">查看教程</a>
+    </p>
+
+    <OpacityBanner style="width:300px;margin:0 auto">
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192429144.jpg" /></li>
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192403940.jpg" /></li>
+      <li><img src="https://img1.mydrivers.com/img/topimg/20220315/192314256.jpg" /></li>
+      <li><a target="iframepage" href="../job/job.jsp">招聘管理</a></li>
+    </OpacityBanner>
+
+        <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <h2>进度条 Process Line</h2>
+    <ProcessLine />
+
+    <h2>折叠菜单 Accordion Menu</h2>
+    <p>折叠菜单的特点是同一时间只展开一个区域，其他区域则处于闭合状态。</p>
+
+    <p>属性说明：</p>
+    <table class="aj-table" align="center" width="500">
+      <thead>
+        <tr>
+          <th>属性</th>
+          <th>含义</th>
+          <th>类型</th>
+          <th>是否必填，默认值</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>&lt;slot&gt;</code></td>
+          <td>菜单内容</td>
+          <td>String</td>
+          <td>y</td>
+        </tr>
+      </tbody>
+    </table>
+    <br />
+    <br />
+    <br />
+    <AccordionMenu style="width:300px;margin:0 auto">
+      <li class="siteMgr">
+        <h3>网站管理</h3>
+        <ul>
+          <li><a target="iframepage" href="website/profile/changePassword.jsp">帐号信息</a></li>
+          <li><a target="iframepage" href="website/profile/companyInfo.jsp">公司信息</a></li>
+          <li><a target="iframepage" href="website/gallery/companyAlbum.jsp">相 册</a></li>
+          <li><a target="iframepage" href="website/pageEditor/index.jsp">页面维护</a></li>
+          <li><a target="iframepage" href="website/profile/global.jsp">全局信息</a></li>
+        </ul>
+      </li>
+
+      <li class="news">
+        <h3>新闻中心管理</h3>
+        <ul>
+          <li><a target="iframepage" href="entry/list/news">新闻管理</a></li>
+        </ul>
+      </li>
+      <li class="levelPoints">
+        <h3>积分系统</h3>
+        <ul>
+          <li><a target="iframepage" href="levelPoints/memberTree.jsp">会员下线一览</a>
+          </li>
+          <li><a target="iframepage" href="levelPoints/showUserPoints.jsp">显示会员积分</a></li>
+        </ul>
+      </li>
+      <li>
+        <h3>其他信息</h3>
+        <ul>
+          <li><a target="iframepage" href="../job/job.jsp">留言管理</a></li>
+          <li><a target="iframepage" href="../job/job.jsp">招聘管理</a></li>
+        </ul>
+      </li>
+    </AccordionMenu>
+
+    <br />
+    <br />
+
+    <h2>文章 Article</h2>
+        <Article title="新股上市首日破发并非坏事 警示投资者打新风险" author="张三" source="http://qq.com" style="max-width:700px;margin:0 auto">
+
+      <p class="one-p">10月22日是科创板新股<span class="linkNormal">中自科技</span>新股上市的日子。按照惯例，新股上市大都会给打新中签的投资者带来一笔无风险的“打新收益”。但对于中自科技的中签者来说，他们期待中的“打新收益”落空了，迎接他们的是新股上市首日破发的命运。打新中签者不仅没有得到“打新收益”，相反还要承担一定的“打新损失”，中自科技上市首日的收盘价较发行价下跌了6.87%。</p>
+      <p class="one-p">新股上市首日破发，这对于打新中签者来说是非常揪心的一件事情。尤其是中自科技开盘即破发，没有给中签者丝毫的逃命机会。当天的最高价是70.50元，低于70.90元的发行价，这意味着打新中签者悉数被套，全部都要为自己“中签”的好运而付出代价。</p>
+      <p class="one-p">那么，中自科技为何会出现上市首日破发现象呢？究其原因主要有两点。一是发行价偏高，高达每股70.90元，其动态市盈率达到百倍。二是今年该公司业绩大幅滑坡。该公司预计，2021年1~9月营业收入为8.6亿元~9.5亿元，同比下滑57.48%至53.03%；预计归母净利润为4500万元~5400万元，同比下滑75.33%至70.40%；预计扣非后归母净利润为3000万元~3900万元，同比下滑84.63%至80.02%。也正因如此，中自科技上市首日破发并不令人意外，这也进一步证实投资者打新之盲目了。</p>
+      <p class="one-p"><img class="content-picture" src="https://img1.mydrivers.com/img/20210706/S91792917-e725-484b-b8c9-b2d0eda32981.png">
+      </p>
+      <p class="one-p">当然，新股上市首日破发在A股市场还是比较少见的。中自科技是今年以来科创板第一家上市首日破发新股，也是科创板成立以来第二只上市首日破发新股。科创板第一只上市首日破发新股是<span class="linkNormal">建龙微纳</span>，其上市之日是2019年12月4日，距今已有一年零10个月，这也足见新股上市首日破发的现象在A股市场并不常见。</p>
+      <p class="one-p">实际上，对于A股市场来说，新股上市首日破发是一件好事。虽然对于A股市场来说，新股破发现象并不少见，但这种新股破发大多都是新股上市之后经过了一轮甚至是几番的市场炒作之后，然后股价回落破发。这样的新股破发除了提醒投资者注意市场炒作的风险之外，其意义并不大。相反，新股上市首日破发意义更加重大。</p>
+      <p class="one-p">首先，新股上市首日破发它有利于提醒询价机构理性询价，而不能为了得到新股份额一味报高价。因为参与新股询价的机构投资者在询价有效的情况下，也是要参与新股配售的。如果新股定价太高，上市就破发了，这对于询价机构来说当然也是不利的。因为他们参与的新股配售份额也会因为破发而出现浮亏。</p>
+      <p class="one-p">其次，新股上市首日破发也有利于向投资者提醒打新的风险。因为A股市场长期以来的新股不败现象，结果导致投资者在打新时逢新必打，根本就不关心新股的基本面，同时也不关心新股的发行价格，甚至将高价发行的新股视为“肉签”股。虽然在过去也经常出现新股破发现象，但新股经过一番炒作之后的破发，并没有危及到打新者的利益，并不会让打新者增加风险意识。而只有新股上市首日破发，才会直接损害到打新者的利益，只有在这种情况下，打新者才会真正意识到打新的风险，从而让打新者关心到新股的基本面，学会理性打新。当然，要达到这个目的，还需要新股上市首日破发现象进一步增加，呈现出一种常态化，这样更有利于投资者理性打新。</p>
+      <p class="one-p">此外，新股上市首日破发也有利于向市场警示炒新的风险。在新股不败的市场环境下，投资者除了盲目打新之外，还会盲目炒新，以至一只新股上市后，通常都会炒出几个、十几个甚至几十个涨停板出来。因此，一只新股上市，往往都会受到市场的投机炒作。而新股上市首日破发，对于炒新者是一个打击。因为炒新者盲目追进新股之后发现，股价不仅没有炒上去，相反股价在进一步下跌，炒新变成了套牢。因此，新股上市首日破发对于炒新者来说也是一种风险警示。</p>
+
+    </Article>
+  </div>
+</template>
+
+<script>
+import OpacityBanner from "@/widget/OpacityBanner.vue";
+import ProcessLine from "@/widget/ProcessLine.vue";
+import AccordionMenu from "@/widget/AccordionMenu.vue";
+import Expander from "@/widget/Expander";
+import ImageEnlarger from "@/widget/ImageEnlarger";
+import Article from '@/widget/Article.vue';
+
+export default {
+  components: {
+    OpacityBanner,
+    ProcessLine,
+    AccordionMenu,
+    Expander,
+    ImageEnlarger,
+    Article
+  },
+};
+</script>
+
+<style lang="less" scoped >
+p {
+  width: 500px;
+  // .aj-text-function();
+  margin: 20px auto;
+  text-indent: 2em;
+}
+h2 {
+  // text-align: left;
+  margin: 20px auto;
+}
+</style>

package/src/router/index.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter, { RouteConfig } from 'vue-router'
+// import Home from '../views/Home.vue'
+
+Vue.use(VueRouter);
+
+const routes: Array<RouteConfig> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import(/* webpackChunkName: "about" */ '../pages/index.vue')
+  }
+];
+
+const router = new VueRouter({
+  routes
+});
+
+export default router;

package/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}