refactor: 文件目录更改, util代码拆分

.gitignore

@@ -23,3 +23,4 @@ node_modules
 
 # 发布输出目录
 dist/docs
+dist/lib/**.html

.npmignore

@@ -1,10 +1,12 @@
 # 忽略目录/文件
-node_modules
+demo
 dist/docs
 dist/lib/**.html
-docs/
-public/
-src/
+docs
+node_modules
+public
+scripts
+src
 
 # 忽略指定文件
 yarn.lock

README.md

@@ -130,13 +130,13 @@ yarn add vue-router-tab
 
 | 任务 | 命令 | 备注 |
 | ---- | ---- | ---- |
-| **插件**：构建 | `npm run lib:build` | 操作前：更改 `babel.config.js` 中的 `useBuiltIns` 值为 `false` 以去除 `ployfill` |
-| **插件**：构建并生成报告 | `npm run lib:build:report` | - 同上 |
+| **插件**：构建 | `npm run lib:build` |
+| **插件**：构建并生成报告 | `npm run lib:build:report` |
 | **插件**：发布 | `npm run lib:publish` | 操作前：更改 `package.json` 中的 `version` 为新的版本号 |
-| **文档**：开发 | `npm run docs:dev` |
-| **文档**：构建 | `npm run docs:build` |
 | **Demo**： 开发 | `npm run demo:dev` |
 | **Demo**： 构建 | `npm run demo:build` |
+| **文档**：开发 | `npm run docs:dev` |
+| **文档**：构建 | `npm run docs:build` |
 | **代码**风格：检查 | `npm run lint` |
 | **代码**风格：检查并修复 | `npm run lint:fix` |
 | **代码**：提交 | `npm run commit` |

babel.config.js

@@ -1,8 +1,10 @@
+// 构建目标是否为库
+const isBuildLib = process.env.VUE_CLI_BUILD_TARGET === 'lib'
+
 module.exports = {
   presets: [
     ['@vue/app', {
-      useBuiltIns: 'usage'
-      // useBuiltIns: false
+      useBuiltIns: isBuildLib ? false : 'usage'
     }]
   ]
 }

src/App.vue → demo/App.vue

@@ -19,8 +19,8 @@
 <style lang="scss" src="./assets/scss/demo.scss"></style>
 
 <script>
-import AppHeader from '@/components/AppHeader.vue'
-import AppAside from '@/components/AppAside.vue'
+import AppHeader from './components/AppHeader.vue'
+import AppAside from './components/AppAside.vue'
 
 export default {
   name: 'App',

src/components/AppAside.vue → demo/components/AppAside.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import MenuGroup from '@/components/MenuGroup.vue'
-import SiteLink from '@/components/SiteLink.vue'
+import MenuGroup from './MenuGroup.vue'
+import SiteLink from './SiteLink.vue'
 
 export default {
   name: 'AppAside',

src/components/AppHeader.vue → demo/components/AppHeader.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import SiteLink from '@/components/SiteLink.vue'
+import SiteLink from './SiteLink.vue'
 
 export default {
   name: 'AppHeader',

src/main.js → demo/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import RouterTab from '@/lib/RouterTab'
+import RouterTab from '../src'
 
 import App from './App.vue'
 import router from './router'

src/views/Page.vue → demo/views/Page.vue

@@ -69,8 +69,8 @@
 </template>
 
 <script>
-import pageTimer from '@/mixins/pageTimer'
-import PageRouteInfo from '@/components/PageRouteInfo'
+import pageTimer from '../mixins/pageTimer'
+import PageRouteInfo from '../components/PageRouteInfo'
 
 export default {
   name: 'Page',

src/views/PageLeave.vue → demo/views/PageLeave.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import pageTimer from '@/mixins/pageTimer'
+import pageTimer from '../mixins/pageTimer'
 
 export default {
   name: 'PageLeave',

src/views/Rule.vue → demo/views/Rule.vue

@@ -58,8 +58,8 @@
 </template>
 
 <script>
-import pageTimer from '@/mixins/pageTimer'
-import PageRouteInfo from '@/components/PageRouteInfo'
+import pageTimer from '../mixins/pageTimer'
+import PageRouteInfo from '../components/PageRouteInfo'
 
 export default {
   name: 'Rule',

dist/lib/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>vue-router-tab demo</title>
-<script src="./vue-router-tab.umd.js"></script>
-
-<link rel="stylesheet" href="./vue-router-tab.css">
-
-
-<script>
-console.log(vue-router-tab)
-</script>

package.json

@@ -19,12 +19,12 @@
   },
   "main": "dist/lib/vue-router-tab.umd.min.js",
   "scripts": {
-    "demo:dev": "vue-cli-service serve",
-    "demo:build": "vue-cli-service build",
-    "docs:dev": "vuepress dev docs",
+    "demo:dev": "vue-cli-service serve --open demo/main.js",
+    "demo:build": "vue-cli-service build demo/main.js",
+    "docs:dev": "vuepress dev docs --open",
     "docs:build": "vuepress build docs",
-    "lib:build": "vue-cli-service build --target lib --dest dist/lib ./src/lib/RouterTab/index.js",
-    "lib:build:report": "vue-cli-service build --report --target lib --dest dist/lib ./src/lib/RouterTab/index.js",
+    "lib:build": "vue-cli-service build --target lib src/index.js",
+    "lib:build:report": "vue-cli-service build --report --target lib src/index.js",
     "lib:publish": "npm run lib:build && npm publish",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix",
@@ -49,7 +49,7 @@
     "node-sass": "^4.9.0",
     "sass-loader": "^7.1.0",
     "vue-template-compiler": "^2.5.22",
-    "vuepress": "^1.0.0-alpha.42",
+    "vuepress": "^1.0.0-alpha.47",
     "yorkie": "^2.0.0"
   },
   "eslintConfig": {

src/lib/RouterTab/components/RouterAlive.js → src/components/RouterAlive.js

@@ -1,9 +1,12 @@
-import { emptyObj, getAliveId, getFirstComponentChild, isAlikeRoute, isSameComponentRoute } from '../util'
+import { emptyObj } from '../util'
+import { getAliveId } from '../util/alive'
+import { getFirstComponentChild } from '../util/dom'
+import { isAlikeRoute, isSameComponentRoute } from '../util/route'
 
 export default {
   name: 'RouterAlive',
   props: {
-    // 缓存key，如果为函数，则参数为route
+    // 缓存id，如果为函数，则参数为route
     aliveId: {
       type: [ String, Function ],
       default: 'path'

src/lib/RouterTab/components/RouterTab.js → src/components/RouterTab.js

@@ -1,13 +1,22 @@
 import Vue from 'vue'
-import RouterAlive from './RouterAlive'
+
+// 方法
+import { emptyObj, emptyArray, debounce } from '../util'
+import { getAliveId } from '../util/alive'
+import { scrollTo } from '../util/dom'
+import { isAlikeRoute, getPathWithoutHash } from '../util/route'
+
+// 语言配置
 import langs from '../lang'
-import { emptyObj, emptyArray, scrollTo, debounce, getAliveId, isAlikeRoute, getPathWithoutHash } from '../util'
+
+// 子组件
+import RouterAlive from './RouterAlive'
 
 export default {
   name: 'RouterTab',
   components: { RouterAlive },
   props: {
-    // 缓存key，如果为函数，则参数为route
+    // 缓存id，如果为函数，则参数为route
     aliveId: RouterAlive.props.aliveId,
 
     // 语言配置
@@ -151,6 +160,10 @@ export default {
   beforeCreate () {
     // 添加到原型链
     Vue.prototype.$routerTab = this
+
+    // 获取跟路径
+    let matched = this.$route.matched
+    this.basePath = (matched[matched.length - 2] || {}).path
   },
 
   created () {

src/lib/RouterTab/components/RouterTab.vue → src/components/RouterTab.vue

@@ -75,6 +75,7 @@
             v-if="isRouterAlive"
             ref="routerView"
             v-bind="routerView"
+            class="router-tab-page"
           />
         </transition>
       </router-alive>
@@ -141,5 +142,5 @@
 
 <script src="./RouterTab.js"></script>
 
-<style lang="scss" src="../scss/RouterTab.scss"></style>
+<style lang="scss" src="../scss/routerTab.scss"></style>
 <style lang="scss" src="../scss/transition.scss"></style>

src/lib/RouterTab/index.js → src/index.js

@@ -1,5 +1,5 @@
-import RouterPage from './mixins/RouterPage'
 import RouterTab from './components/RouterTab.vue'
+import routerPage from './mixins/routerPage'
 
 // 安装
 RouterTab.install = function install (Vue, options) {
@@ -7,7 +7,7 @@ RouterTab.install = function install (Vue, options) {
   install.installed = true
 
   Vue.component(RouterTab.name, RouterTab)
-  Vue.mixin(RouterPage)
+  Vue.mixin(routerPage)
 }
 
 // 如果浏览器环境且拥有全局Vue，则自动安装组件

src/lib/RouterTab/util.js

@@ -1,98 +0,0 @@
-import rules from './rules'
-
-// 空对象和数组
-export const emptyObj = Object.create(null)
-export const emptyArray = []
-
-// 是否定义
-export function isDef (v) {
-  return v !== undefined && v !== null
-}
-
-// 防抖
-export function debounce (fn, delay = 200) {
-  let timeout = null
-  return function () {
-    let context = this
-    let args = arguments
-    clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      fn.call(context, args)
-    }, delay)
-  }
-}
-
-// 滚动
-export function scrollTo ($el, left = 0, top = 0) {
-  if ($el.scrollTo) {
-    $el.scrollTo({
-      left,
-      top,
-      behavior: 'smooth'
-    })
-  } else {
-    $el.scrollLeft = left
-    $el.scrollTop = top
-  }
-}
-
-/* 组件方法 */
-
-// 获取第一个子组件
-export function getFirstComponentChild (children) {
-  if (Array.isArray(children)) {
-    for (let i = 0; i < children.length; i++) {
-      const c = children[i]
-      if (
-        isDef(c) &&
-        (isDef(c.componentOptions) || isAsyncPlaceholder(c))
-      ) {
-        return c
-      }
-    }
-  }
-}
-
-// 获取缓存 id
-export function getAliveId (route = this.$route) {
-  let rule = (route.meta && route.meta.aliveId) || this.aliveId
-
-  if (typeof rule === 'string') {
-    rule = rules[rule.toLowerCase()]
-  }
-
-  if (typeof rule !== 'function') {
-    rule = rules.path
-  }
-
-  return rule.bind(this)(route)
-}
-
-/* 路由方法 */
-
-// 是否异步占位
-export function isAsyncPlaceholder (node) {
-  return node.isComment && node.asyncFactory
-}
-
-// 获取路由不带hash的路径
-export function getPathWithoutHash (route) {
-  return route.hash
-    ? route.fullPath.replace(route.hash, '')
-    : route.fullPath
-}
-
-// 是否相似路由
-export function isAlikeRoute (route1, route2) {
-  return getPathWithoutHash(route1) === getPathWithoutHash(route2)
-}
-
-// 获取路由页面组件
-export function getRouteComponent ({ matched }) {
-  return matched[matched.length - 1].components.default
-}
-
-// 路由是否共用组件
-export function isSameComponentRoute (route1, route2) {
-  return getRouteComponent(route1) === getRouteComponent(route2)
-}

src/lib/RouterTab/mixins/RouterPage.js → src/mixins/routerPage.js

@@ -30,16 +30,14 @@ export default {
 
   // 解决webpack热加载后组件缓存不更新
   activated () {
-    const { $routerTab, $vnode, _isRouterPage } = this
+    if (!this._isRouterPage) return false
 
-    if (!_isRouterPage) return false
-
-    let ctorId = $vnode.componentOptions.Ctor.cid
+    let ctorId = this.$vnode.componentOptions.Ctor.cid
 
     // 热加载后Ctor.cid改变
     if (this._ctorId && this._ctorId !== ctorId) {
       this.$destroy()
-      $routerTab.refreshTab()
+      this.$routerTab.refreshTab()
     }
 
     this._ctorId = ctorId

src/util/alive.js

@@ -0,0 +1,16 @@
+import rules from './rules'
+
+// 获取缓存 id
+export function getAliveId (route = this.$route) {
+  let rule = (route.meta && route.meta.aliveId) || this.aliveId
+
+  if (typeof rule === 'string') {
+    rule = rules[rule.toLowerCase()]
+  }
+
+  if (typeof rule !== 'function') {
+    rule = rules.path
+  }
+
+  return rule.bind(this)(route)
+}

src/util/dom.js

@@ -0,0 +1,35 @@
+import { isDef } from './index'
+
+// 滚动
+export function scrollTo ($el, left = 0, top = 0) {
+  if ($el.scrollTo) {
+    $el.scrollTo({
+      left,
+      top,
+      behavior: 'smooth'
+    })
+  } else {
+    $el.scrollLeft = left
+    $el.scrollTop = top
+  }
+}
+
+// 获取第一个子组件
+export function getFirstComponentChild (children) {
+  if (Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const c = children[i]
+      if (
+        isDef(c) &&
+        (isDef(c.componentOptions) || isAsyncPlaceholder(c))
+      ) {
+        return c
+      }
+    }
+  }
+}
+
+// 是否异步占位
+export function isAsyncPlaceholder (node) {
+  return node.isComment && node.asyncFactory
+}

src/util/index.js

@@ -0,0 +1,21 @@
+// 空对象和数组
+export const emptyObj = Object.create(null)
+export const emptyArray = []
+
+// 是否定义
+export function isDef (v) {
+  return v !== undefined && v !== null
+}
+
+// 防抖
+export function debounce (fn, delay = 200) {
+  let timeout = null
+  return function () {
+    let context = this
+    let args = arguments
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      fn.call(context, args)
+    }, delay)
+  }
+}

src/util/route.js

@@ -0,0 +1,21 @@
+// 获取路由不带hash的路径
+export function getPathWithoutHash (route) {
+  return route.hash
+    ? route.fullPath.replace(route.hash, '')
+    : route.fullPath
+}
+
+// 是否相似路由
+export function isAlikeRoute (route1, route2) {
+  return getPathWithoutHash(route1) === getPathWithoutHash(route2)
+}
+
+// 获取路由页面组件
+export function getRouteComponent ({ matched }) {
+  return matched[matched.length - 1].components.default
+}
+
+// 路由是否共用组件
+export function isSameComponentRoute (route1, route2) {
+  return getRouteComponent(route1) === getRouteComponent(route2)
+}

vue.config.js

@@ -1,8 +1,10 @@
+// 构建目标是否为库
+const isBuildLib = process.env.npm_lifecycle_script.indexOf('--target lib') > 0
+
 module.exports = {
   publicPath: '', // 相对路径
 
-  // 输出目录
-  outputDir: 'dist/docs/demo',
+  outputDir: isBuildLib ? 'dist/lib' : 'dist/docs/demo',
 
   // webpack 链式配置
   chainWebpack: config => {
@@ -14,7 +16,7 @@ module.exports = {
     loaderOptions: {
       sass: {
         // scss公共变量
-        data: `@import "@/assets/scss/variables.scss";`
+        data: isBuildLib ? undefined : `@import "demo/assets/scss/variables.scss";`
       }
     }
   }