Skip to content

caidix/vue-cli-render-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-cli-render-js

基于vue-cli,分成多个页面为独立的模块进行打包编译成js文件,通过js渲染的形式引入到相应的项目中。

运行

  • npm run serve
  • npm run build

dev-server开启后编译地址为 端口号/js(css)/pageName.js(css)

本地编译使用方式

编译修改替换,可以使用Fiddler等拦截替换成本地地址进行编译。

优点

采用js渲染,不必在页面内开启多个部分时多次加载组件库等资源。

缺点

没有实时编译,需要人为手动刷新界面。 如果引入的项目Vue内没有js文件所需的一些js文件,则会报错。

使用方式

  • 向后端上传打包的js、css文件
  • 后端提供接口返回文件地址
  • 借助知名库requirejs
<template>
  <div id="#renderJS"></div>
</template>
import requirejs from 'requirejs';
import Vue from 'vue';
export default {
  data() {
    return { //假设
      jsUrl: 'xxx',
      cssUrl: 'xxx'
    }
  },
  methods: {
    renderMap() {
      let link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = this.cssUrl;
      document.head.appendChild(link);
      requirejs([
        // js name
      ], root => {
        root.render(Vue, '#renderJS');
      })
    }
  }
}

补充

我们知道,Vue在$mount构建前并未挂载到某个实例中,且在根实例中可以这么写:

new Vue({
  el: '#CDCDCDCD',
  provide: {
    foo
  },
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

我们也可以做更多的配置使父项目传入参数给js渲染的界面。比如: index.js

export default {
  createVue(opts) {
    return new Vue({
      ...opts,
    render: h => h(App)
    })
  },
  render(opts) {
    // 根据协定好的传入进行处理
    // opts = {
    //   el: 'xx',
    //   data:'xx'
    // }
    return this.createVue(opts);
  }
}

About

基于vue脚手架的简单项目,只渲染打包js、css文件,在对某些数据展示可以采用js渲染嵌入的方式来处理。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published