d2-admin-start-kit: A CSS repository from chiangcho

说明

该项目下集成的例子及改造的内容如下：

缓存设置
动态指定页签标题
动态加载vue组件
当前页面跳转
多级菜单展示位置适配
代码高亮例子
json-server例子

缓存设置

动态指定页签标题

修改了tabs/index.vue文件,使用方式是在路由跳转时，params中指定title属性

this.$router.push({
        name: 'demo-page2',
        params: {
          title: '页面2-abc',
          id: 'abc'
        }
      })

动态加载vue组件

使用了http-vue-loader https://github.com/FranckFreiburger/http-vue-loader

在index.html中引入

<script src="https://unpkg.com/http-vue-loader"></script>

可以直接使用httpVueLoader方法

在组件的components指定

export default {
  name: 'demo-page1',
  components: {
    abc: httpVueLoader('http://localhost:3000/hello.vue')
  },
  ....
}

动态注册组件

created () {
    console.log('created')
    this.$options.components['abc'] = httpVueLoader('http://localhost:3000/' + this.templateId + '.vue')
  },

当前页面跳转

参见document项目中相关说明

多级菜单展示位置适配

修改了element-ui的node_modules\element-ui\lib\utils\popper.js文件，修改后的文件位于tools\element-ui\popper.js

代码格式化及高亮例子

代码格式化

格式化测试了两个例子，prettier和js-beautify，其中前者会对语法进行校验，不太适合一些场景，后者更适合规则高级模式下的规则格式化。

prettier

先引入内核及插件

import prettier from 'prettier/standalone'
import parserflow from 'prettier/parser-flow'
import "babel-polyfill"
const plugins = [parserflow]

执行格式化

this.code = prettier.format(this.code, { parser: 'flow', plugins })

js-beautify

先引入

import beautify from 'js-beautify'

执行格式化

this.code = beautify(this.code, { indent_size: 2, space_in_empty_paren: true })

代码高亮

使用highlight.js实现代码高亮

引入js及css

import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/solarized-light.css'

在mouted中进行语言注册

hljs.registerLanguage('javascript', javascript)

需要高亮的代码需要指定<pre><code></code></pre>

    <pre>
      <code ref="code">        
      </code>
    </pre>

执行高亮

this.$refs.code.innerHTML = this.code
hljs.highlightBlock(this.$refs.code)

json-server例子

例子demo1中使用了异步加载，需要启动模拟数据服务，使用的是json-server,相关数据在json-server目录下

$ json-server jobs.json

  \{^_^}/ hi!

  Loading jobs.json
  Done

  Resources
  http://localhost:3000/templates

  Home
  http://localhost:3000

json-server会将json文件中的json数据发布为标准的RESTful服务同时，还可以自定义静态文件，默认放在public目录下，例如访问

http://localhost:3000/hello.vue

则实际访问的是./public/hello.vue

问题

对象不支持“startsWith”属性或方法

如果引入prettier，则会报该错误，该方法时es6规范中的，可以使用babel-polyfill

npm install --save-dev babel-polyfill

三种引入方式,前两种在需要的页面引入，第三种在webpack中配置

require("babel-polyfill")

import "babel-polyfill"

module.exports = {

  entry: ["babel-polyfill", "./app/js"]

}

chiangcho/d2-admin-start-kit

说明