精华内容
下载资源
问答
  • 2021-11-09 15:17:36

    太长不看

    我把多项目集成模板上传到了github vue-multi-admins-template, clone到本地即可使用, 使用方法在文章最后使用

    需求

    vue多个项目开发时, 存在项目内资源共用的问题, 解决方案一般有两个,
    1, 每个项目独立开发, 公用资源通过npm打包发布到私人或公用npm服务器, 使用时引用这些npm包
    2, 多个项目集成到一个根项目里, 每个子项目可单独运行打包, 也可直接运行打包由子项目集成的根项目
    本文介绍方案2

    说明

    为适用公司业务, 项目基于vue-admin-template集成, 基于其他项目的话原理是一样的

    项目结构

    红框从上到下
    (红框从上到下依次为子项目文件, 公共资源区, 根项目配置区)
    /apps文件夹存放子项目, 子项目内结构与根项目src文件夹内结构相同, 实际配置的时候可直接复制根项目src文件夹内容到子项目内

    搭建流程

    1, 本地安装运行vue-admin-template

    git clone https://github.com/PanJiaChen/vue-admin-template.git

    cd vue-admin-template

    npm install

    npm run dev

    2, 创建子项目
    直接复制根项目src文件夹内容到子项目内, 再在子项目目录内添加index.htmltest-app.html, 两文件内容相同, 内容可直接从public/index.html里复制, 前者是单个子项目运行打包时的页面入口, 后者是根项目运行打包时的页面入口

    3, 根目录下添加 /projects.js

    let path = require('path')
    let glob = require('glob')
    //配置pages多页面获取当前文件夹下的html和js
    function getEntry(globPath) {
      let entries = {},
        basename, tmp, pathname;
    
      glob.sync(globPath).forEach(function(entry) {
        basename = path.basename(entry, path.extname(entry));
        tmp = entry.split('/').splice(-3);
        pathname = basename; // 正确输出js和html的路径
    
        entries[pathname] = {
          entry: 'src/' + tmp[0] + '/' + tmp[1] + '/main.js',
          template: 'src/' + tmp[0] + '/' + tmp[1] + '/' + tmp[2],
          title:  tmp[2],
          filename: tmp[2] //如test-app.html, 为根项目不同页面配置信息
        };
      });
      return entries;
    }
    let pages = getEntry('./src/apps/**?/*.html');
    pages['index'] = {
      // pages 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时,
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '公共首页',
      // 在这个页面中包含的块,默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
      // 必须, 否则打包时页面空白, 参考: https://blog.csdn.net/weixin_43405848/article/details/120371626
      chunks: ['chunk-libs', 'chunk-vendors','chunk-commons', 'chunk-elementUI', 'index', 'runtime', 'manifest']
    };
    
    const config = {
      all: {
        pages
      },
      'test-app': {
        pages: {
          index: {
            entry: "src/apps/test-app/main.js",
            template: "src/apps/test-app/index.html",
            filename: "index.html",
             // 必须, 否则打包时页面空白, 参考: https://blog.csdn.net/weixin_43405848/article/details/120371626
            chunks: ['chunk-libs', 'chunk-vendors','chunk-commons', 'chunk-elementUI', 'index', 'runtime', 'manifest']
          }
        },
        outputDir: "dist/test-app/"
      },
      // 新子项目在这里配置
      'test-app1': {},
      'test-app2': {},
      
    };
    
    module.exports = config;
    

    4, 修改 /vue.config.js

    const projectsConfig = require("./projects.js");
    /*
    	npm run serve 就是all,否则是后接子系统名称
    */
    let projectName = (!process.env.VUE_APP_PROJECT_NAME || process.env.VUE_APP_PROJECT_NAME.length === 0)
     ? 'all' : process.env.VUE_APP_PROJECT_NAME;
     
    module.exports = {
      // 注意, 此句要放在outputDir: 'dist'配置项后面以将其覆盖, 否则打包不会按项目划分目录
      ...projectsConfig[projectName],
      
      // 注意, 需注释掉config.plugin('preload')配置项, 否则运行会报错
      // 注意, 注释掉config.plugin('ScriptExtHtmlWebpackPlugin')那段代码, 否则打包后项目会有部分打包文件的报错信息, 参考: https://github.com/PanJiaChen/vue-admin-template/issues/593
    }
    
    
    
    

    这里环境变量需要是VUE_APP_XXX形式, 因为vue-admin模板基于vue-cli开发, 而vue-cli对环境变量设置做了如下规定, 具体可参看文档vue-cli环境变量

    请注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin
    静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

    意思就是说vuecli项目里的用户环境变量名必须加上VUE_APP_前缀, 否则在项目里获取不到

    然后为子项目配置快捷路径, 在子项目文件里全局替换@/路径为@test/路径

    configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        resolve: {
          alias: {
            '@': resolve('src'),
            '@test': resolve('src/apps/test-app')
          },
        }
      },
    
    

    5, 修改 /package.json

    "scripts": {
        "dev": "vue-cli-service serve",
        "dev:test-app": "cross-env VUE_APP_PROJECT_NAME=test-app vue-cli-service serve --open",
        "build:test-app": "cross-env VUE_APP_PROJECT_NAME=test-app vue-cli-service build",
      },
    

    需要安装 cross-env
    npm i --save-dev cross-env

    6, 运行
    运行根项目: npm run serve
    运行子项目: npm run dev:test-app

    使用

    以上是多项目集成项目搭建流程, 下面是项目使用

    运行

    git clone git@github.com:Skura23/vue-multi-admins-template.git
    
    # install dependency
    npm install
    
    # 运行对应项目, 以test-app为例
    npm run dev:test-app
    
    

    打包

    # 打包对应项目, 以test-app为例
    npm run build:test-app
    

    配置

    新增子项目:

    
    /src/apps 下新建xxx-app文件夹, 此处放入项目代码文件夹, 增加index.html和xxx-app.html, 两文件内容相同
    
    /projects.js
    const config = {
        ...
        'xxx-app':{
        pages: {
          index: {
            entry: "src/apps/xxx-app/main.js",
            template: "src/apps/xxx-app/index.html",
            filename: "index.html"
          }
        },
        outputDir: "dist/xxx-app/"
      },
        ...
    }
    
    /vue.config.js
    configureWebpack.resolve.alias处为不同子项目配置快捷路径
    
    /.env.development /.env.production 处为不同子项目设置环境变量VUE_APP_BASE_API
    VUE_APP_BASE_API_xxx-app = '/your_url'
    此环境变量调用方式为: process.env[`VUE_APP_BASE_API_${process.env.VUE_APP_PROJECT_NAME}`]
    
    
    

    参考: https://leftfist.blog.csdn.net/article/details/118160242

    更多相关内容
  • 这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个记录。...

    这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个记录。


    安装Node.js以及npm包管理器

    官网简介:Node.js 是一个基于 Chrome V8引擎的 JavaScript运行环境,它使用了一个事件驱动、非阻塞式 I/O的模型,因此其轻量又高效。换句话说,想要运行Vue脚手架就需要Node.js。

    d9441c8e9d37c8ae8df8a3f522ebdb06.png

    下载网址:http://nodejs.cn/download/

    选择对应的系统安装包下载并安装,安装过程一路点击下一步就行。

    b2646045b5ccb6be106efe46e0539d04.png

    下载安装完成后,打开命令窗口,依次输入node -v 和npm -v ,下方出现对应版本号就表示安装成功。

    使用npm安装Vue.js

    29befc0fb40c8b08abd50746d6ebd4f2.png

    在命令行中输入npm install vue 等待完成即可

    使用npm安装Vue-cli 脚手架

    d81c534b8c3ab7cd846089b74d158be2.png

    在命令行中输入 npm install --global vue-cli等待完成即可

    Vue-cli 脚手架 搭建Vue项目

    上述步骤都做完之后,就可以进行Vue项目的构建了。

    e4006c6e85a947cc0bfe539e8dd9dafb.png

    首先,在命令窗口打开你要安装的地址,在这里我选择在桌面构建项目。

    f624d972fc1942ff2417a65146364596.png

    接着,输入vue init webpack first-pro,按回车键

    b06332b7e83736c65a0b7174851f784c.png

    接下来,会让你填写一些项目相关的描述。

    第一个就是问你项目的名称,你可以修改也可以直接按enter键使用默认名,这里我直接按下enter

    d3ef493f9bc8de2789f4f5458b5dc5c7.png

    第二个问题是让你输入项目的简介,这里可以填也可以不填,我直接选择enter

    754b261149a34800add773f8b237b654.png

    第三个问题是让你输入作者,这里你可以写上你的名称和邮箱地址

    849d70c65282073327145a6083b538ac.png

    第四个问题是问你构建模式,在此选择第一个按enter

    3754e6656d75ab75a18b80bbd1d2767d.png

    第五个问你是否安装路由,输入Y确认安装

    ff05004d61b4873228058cbcd44f68d8.png

    第六个问题是是否使用规范化代码,在此输入n后回车

    c9ede0657db3db69369c21f8ac1afc2a.png

    第七个问题是是否单元测试,这里输入n后回车

    1771a904c153852dedb7adcf739c5101.png

    第八个问题是选择哪种构建方式,这里我们选择NPM构建方式,然后回车

    a260d55ba999a36553afae195fdfea95.png

    项目相关信息填写完之后,vue脚手架就会自动构建项目,此时我们等待一会即可。

    c6dc1980f3e7eef7b2a1bfdc547b1bb7.png

    项目构建完成之后,桌面上多了一个first-pro文件夹,此时就说明项目构建成功了!

    运行项目

    9e2e42b17ce7b5c367110600125a39c4.png

    在上面步骤完成之后,在命令窗口进入first-pro文件夹,输入命令npm run dev之后回车。

    5449382224f6adbc83133bd9f8b5e14c.png

    看到这个界面之后,就代表启动成功了,此时浏览器中输入红线所指网址

    3e0c6b28d416a55052ad4b0320c70af0.png
    0e0f00743a6398c13149ff4a57e66d2a.png

    当看到上面这个界面的时候,一个完整的Vue项目就已经构建成功并可以运行了!

    写在最后

    通过上面的步骤我们就成功创建了一个Vue项目了,感觉怎么样?是不是很快乐啊?


    如果看完文章之后对你有帮助,欢迎评论、转发、收藏和关注!

    展开全文
  • 背景 需求:pc端可以编辑保存在移动端上显示的界面,pc端上可以...现在打算做一套公用组件,给两端使用,但是又不想在git上维护3个项目(3个项目包括:pc,移动,共用组件),因此有了本文:Vue多项目共用组件,并且

    背景

    需求:pc端可以编辑保存在移动端上显示的界面,pc端上可以预览移动端上的显示。(上述pc端及移动端都是Vue项目)

    这样看来,这个pc端预览界面及移动端上的显示,肯定是要用同一套组件了。

    以前做过类似的项目是用iframe嵌套移动端界面实现的,但是后来非常后悔:1、数据传输是个问题,无论postmessage还是借助服务端,都非常麻烦。2、不灵活

    现在打算做一套公用组件,给两端使用,但是又不想在git上维护3个项目(3个项目包括:pc移动共用组件),因此有了本文:Vue多项目共用组件,并且多项目整合到一个项目中分开维护打包发布。

    注意!本文截图只整合了pc端共用组件两个项目,移动端用的是uniapp还没整合过来


    走这一步前先确认被整合的项目是能跑起来的!!

    第一步:多项目整合到一个项目

    目前只整合了pc端及共用组件两个项目

    1、目录:

     

     子系统展开。共用组件在第二步介绍开发使用方式

    2. 打包运行配置文件

    在项目根目录下新建一个config目录,在新建一个projectsConfig.js文件,指定入口文件,端口号等

    3. vue.config.js配置

    4. pageage.json 配置子系统打包命令,运行命令

    红框框处写项目名称,绿框框处可以自己定义执行指令名。

    然后现在尝试执行这些指令,没报错就成功了,报错的话看情况解决吧孩砸~


    第二步:写共用组件

    1、main.js

    这里我随便写的组件名叫abab。但建议各位规范命名,例如饿了么用el-开头,antd用a-开头。

    2、pageage.json 设置模块的入口及名称等

    名称name设置共用组件,在第三步的时候用到

    因为这个共用组件是公司内部使用,不发布到npm,所以 "private": true,

    module设置共用组件入口文件

    3、npm link

    在package.json所在层级目录下执行npm link,把共用组件连接到全局。


    第三步:pc端连接共用组件移动端同理)

    1、npm link 共用组件

    pc端项目根目录执行npm link 共用组件,由于pc端共用组件在同一个项目,所以执行位置还是在package.json所在层级目录下

    移除链接 npm unlink 共用组件

    2、pc端的main.js

    import install from '共用组件名'
    Vue.use(install);

    3、pc端使用共用组件

    <Abab></Abab>

    搞定了可以用了啊包备!没报错就成功了,报错的话看情况解决吧孩砸~


    参考文献:

    https://blog.csdn.net/qq_35321405/article/details/102951883

    https://blog.csdn.net/weixin_46773434/article/details/110880319

    https://blog.csdn.net/sinat_28071063/article/details/105778699

    展开全文
  • 本文以vue-cli3+为例,实现系统集成下的分模块打包。

    本文以vue-cli3+为例,实现多系统集成下的分模块打包。分模块打包方式多种多样,下文可适用于多系统之间互不干扰,主系统可集成各子系统,各子系统又可单独运行的业务场景。

    一、目标

    我们要实现什么?所谓分模块打包,那么各个模块内就必须得有自己独立的入口文件,路由文件。按照这种构想,我在一个新的脚手架src目录下新建了一个projects目录:
    图1
    如上图,可以看到Aproject、B、C、D四个项目。我在A项目中建了assets,common和views文件夹,其中assets可以再建img和css的文件夹,common内可以放公共组件或者方法,views页面可以放页面,甚至你还可以建一个components文件夹专门用来放组件。

    好了,我们的视图目录结构大概就是上面的样子。我们期待的是,我们可以打包这个A模块这个‘小vue’,就像打包一个完整vue的项目一样。那么如何实现这部分呢?


    二、打包单个模块

    我们知道,在package.json中,有项目启动,打包的命令。
    在这里插入图片描述

    我们可以从这里入手。

    这里就不得不提到cross-env这个模块了。
    我们之前在设置生产环境,测试环境,开发环境时也会用到这个模块。在这里不详细表述了。

    cross-env:npm install --save-dev cross-env
    

    现在我们的思路大概是这样的,当我们执行打包命令的时候,通过cross-env去找到我们的入口文件,然后再打包。

    所以我们可以模仿环境变量的写法,在package中写入如下图代码。
    在这里插入图片描述
    代码:

        "dev:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service serve",
        "dev:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service serve",
        "dev:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service serve",
        "dev:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service serve",
        "build:projectA": "cross-env PROJECT_NAME=projectA vue-cli-service build",
        "build:projectB": "cross-env PROJECT_NAME=projectB vue-cli-service build",
        "build:projectC": "cross-env PROJECT_NAME=projectC vue-cli-service build",
        "build:projectD": "cross-env PROJECT_NAME=projectD vue-cli-service build",
    

    写完了这些,我们就可以着手模仿vue配置小vue的文件了。

    • 在main.js中配置如下代码:
            import Vue from "vue";
    		import App from "./App.vue";
    		import router from "./router";
    		import store from "./store";
    		
    		Vue.config.productionTip = false;
    		
    		new Vue({
    		    router,
    		    store,
    		    render: h => h(App)
    		}).$mount("#app");
    
    • 在App.vue中配置如下代码:
            <template>
    		  <div id="app">
    		    <router-view />
    		  </div>
    		</template>
    		
    		<style lang="less">
    		
    		</style>
    
    • 在router.js中配置如下代码
    		import Vue from "vue";
    		import Router from "vue-router";
    		import Home from "./views/Home.vue";
    		
    		Vue.use(Router);
    		
    		export default new Router({
    		  routes: [
    		    {
    		      path: "/",
    		      name: "home",
    		      component: Home
    		    }
    		  ]
    		});
    
    • 在page文件夹中建立Home.vue,写入如下代码:
    		<template>
    		  <div>
    		    我是a项目
    		  </div>
    		</template>
    		
    		<script>
    		export default {};
    		</script>
    		
    		<style></style>
    
    • 在项目最外层建立config文件夹,在其中新建projectsConfig.js写入:
    const config = {
      projectA: {
        pages: {
          index: {
            entry: "src/projects/projectA/main.js",
            template: "public/index.html",
            filename: "index.html"
          }
        },
        devServer: {
          port: 8080, // 端口地址
          open: false, // 是否自动打开浏览器页面
          host: "0.0.0.0", // 指定使用一个 host,默认是 localhost
          https: false, // 使用https提供服务
          disableHostCheck: true,
          // 设置代理
          proxy: {
            "/eopenhapi": {
              target: "http://open.jdpay.com",
              changeOrigin: true
            },
            "/hapi": {
              target: "http://open.jdpay.com",
              changeOrigin: true
            }
          }
        }
      },
      projectB: {},
      projectC: {}
    };
    module.exports = config;
    
    • 把projectsConfig.js并入vue.config.js,vue.config.js中代码如下
    const config = require("./config/projectsConfig.js");
    let projectName = process.env.PROJECT_NAME;
    
    module.exports = {
      ...config[projectName],
      // pages: conf.pages,
    
      // 基本路径
      // baseUrl: './',//vue-cli3.3以下版本使用
      publicPath: "./", // vue-cli3.3+新版本使用
    
      // 输出文件目录
      outputDir: "dist/" + projectName + "/"
    };
    

    写到这里我们就建立一个完整的小vue了。

    • 运行命令 cnpm run dev:projectA
      在这里插入图片描述

    • 运行命令 cnpm run build:projectA
      在这里插入图片描述
      效果完美。

    三、打包总项目及子系统

    一个大型项目必然会有公共模块,这里会写一个导航栏作为公共组件。

    1. 在projects下建立公共模块的文件夹common,写入前面A项目的目录结构,如图:
      在这里插入图片描述
    2. 在package.json中写入运行命令和打包命令。
     "dev:common": "cross-env PROJECT_NAME=common vue-cli-service serve",
     "build:common": "cross-env PROJECT_NAME=common vue-cli-service build",
    
    1. 在Home.vue中写公共导航

      这里会使用iview作为ui组件,但也因此有一个问题,我的A,B,C,D四个项目每个项目引入一遍UI框架,那打包出来整个项目将会非常的大,所以我们在项目必须采用按需引入的方式。(项目中还是下载整个ivew)

    写入如下代码:

    <template>
      <div class="main-content">
        <Layout>
          <header class="head-box">
            <Menu
              mode="horizontal"
              theme="primary"
              active-name="1"
              @on-select="menuClick"
            >
              <div class="layout-logo">Oralinge</div>
              <div class="layout-nav">
                <div class="layout-nav-content">
                  <!-- 系统列表 -->
                  <span v-for="(item, index) in systemList" :key="index">
                    <MenuItem
                      :name="item.basepath + '?systemId=' + item.systemId"
                      @click="go(item)"
                    >
                      <Icon type="ios-navigate"></Icon>
                      {{ item.title }}
                    </MenuItem>
                  </span>
                </div>
              </div>
              <div class="layout-right">
                <Dropdown>
                  <!-- 登录姓名 -->
                  <a href="javascript:void(0)">
                    {{ user.userName }}
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <!-- 退出登录 -->
                  <DropdownMenu slot="list">
                    <DropdownItem name="logout">退出登录</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
            </Menu>
          </header>
        </Layout>
        <iframe
          :src="systemUrl"
          width="100%"
          height="100%"
          frameborder="0"
          class="iframe"
          id="bossIframe"
        ></iframe>
      </div>
    </template>
    <script>
    import {
      Layout,
      Menu,
      MenuItem,
      Dropdown,
      DropdownItem,
      DropdownMenu
    } from "view-design";
    
    export default {
      components: {
        Layout,
        Menu,
        MenuItem,
        Dropdown,
        DropdownItem,
        DropdownMenu
      },
      data() {
        return {
          systemUrl: "",
          isFullscreen: false,
          loading: false,
          systemList: [
            {
              title: "A项目",
              basepath: "http://localhost:8080/#/",
              systemId: "A"
            },
            {
              title: "B项目",
              basepath: "http://localhost:8082/#/",
              systemId: "B"
            },
            {
              title: "C项目",
              basepath: "http://localhost:8083/#/",
              systemId: "c"
            },
            {
              title: "D项目",
              basepath: "http://localhost:8084/#/",
              systemId: "D"
            }
          ],
          user: {}
        };
      },
      mounted() {
        this.systemUrl =
          this.systemList[0].basepath + "?systemId=" + this.systemList[0].systemId;
      },
      methods: {
        menuClick(name) {
          this.systemUrl = name;
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @head-height: 50px;
    .main-content {
      height: 100%;
      padding-top: @head-height;
      box-sizing: border-box;
      overflow: hidden;
    }
    .head-box {
      width: 100%;
      height: @head-height;
      line-height: @head-height;
      position: fixed;
      top: 0;
      left: 0;
      min-width: 1200px;
    
      .ivu-menu-horizontal {
        height: 100%;
        line-height: @head-height;
      }
      .layout-logo {
        display: inline-block;
        width: 200px;
        color: #fff;
        font-size: 28px;
        text-align: center;
        vertical-align: top;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #2d8cf0;
        z-index: 5;
      }
      .layout-nav {
        display: inline-block;
        width: 100%;
        height: 100%;
        padding-left: 200px;
        padding-right: 100px;
        box-sizing: border-box;
        overflow-x: auto;
        z-index: 4;
        &-content {
          //   width: 100%;
          overflow: hidden;
          height: 100%;
        }
      }
      .layout-right {
        padding-right: 20px;
        padding-left: 20px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: #2d8cf0;
        z-index: 5;
        a {
          color: #fff;
        }
      }
    
      .ivu-menu-item-active {
        font-size: 20px;
      }
    }
    </style>
    
    

    效果:
    在这里插入图片描述
    B项目使用同样的方法配置文件。
    配置后效果如下:
    在这里插入图片描述

    到这里,我们就基本实现了分模块运行以及集体运行了。

    下面看一下打包。
    在分别运行了B项目和common的打包命令以后,效果正常。
    在这里插入图片描述
    另外,我在这里采用了iframe的方式嵌入了其他项目,是因为引入的方式打包的时候会打包太多。

    这样做的好处就是公共项目仅仅作为一个外壳使用,其他项目与其并没有太多的关联,保证了每个项目模块的独立性。


    四、demo地址

    https://github.com/Oralinge/pointsmodule


    以上。

    展开全文
  • 写两生产的配置启动加载文件一般配置的只要配置config里面的配置信息,大概是一些url和项目描述 配置package.json的启动命令"dev:workorder": "cross-env PROJECT=workorder nodebuild/dev-server...
  • 通过脚手架创建的vue项目集成electron桌面应用程序 1.vue-cli创建的vue项目 2.安装Vue CLI Plugin Electron Builder vue add electron-builder 安装的过程会提示选择安装electron的版本,选择最新版本安装即可 Tip:...
  • 这是vue集成trtc实现多人实时音视频的一demo,包含退出房间功能。后面还将继续发布,利用websoket,实现邀请用户加入房间的功能,用户可以接受或者拒绝。在后面还有vue集成实时音视频、即时通讯、白板涂鸦功能的...
  • (个人)这里 的工程类型 只有两种:单工程 项目,多工程 项目多个子工程集成)。 一、业务场景:  1、一个项目有多个子模块(子模块之间没有关系,但他们有共用的一套权限校验);对于这样的场景是可以把项目...
  • 由于实际项目的特点产生了系统共享开发和独立打包的需求,主要原理在于应用vue页面支持和webpack的脚本编写。本方案中,vue项目由一外壳和若干子系统构成。外壳指本vue项目外层代码,提供共享组件和功能;...
  • 本文以vue-cli3+为例,实现系统集成下的分模块打包。分模块打包方式多种多样,下文可适用于多系统之间互不干扰,主系统可集成各子系统,各子系统又可单独运行的业务场景。 一、目标 我们要实现什么?所谓分模块...
  • 1、使用vue-cli构建一个vue项目。然后下载UEditor源码,地址 把项目复制到vue项目的static文件下。目的是让服务可以访问到里面的文件,打开UEditor目录文件。这里下载的是jsp版本的。文件名字没有更改过。打开里面...
  • 基于Vue多项目整合实践

    千次阅读 2017-10-15 15:07:08
    在笔者所在的前端开发团队中,采用前后端分离方案是在整个业务线稳定后进行的。业务前期主要采用后端套模板的方式,现阶段是采用基于Vue的单页...(项目指根据新需求创建的项目代码,工程指一套代码下包含多个项目。...
  • 本文为大家分享了vue如何搭建多页面多系统应用,供大家参考,具体内容如下 一、多页面多系统应用 ...在做Vue项目的时候,需要用对多个类似系统做一个集成。想过很多种方法,比如:完全单页应用,分开独立应用,
  • AutoVue 是 Oracle 公司开发的一个多用途的档案浏览应用软件,提供使用者单 一操作使用界面,来让你可以很容易地检视、标注、列印你的各种图档,AutoVue 可供用户直接开启浏览多种不同格式的档案,而不用以前多种的...
  • 先用vue可视化图形界面创建一个vue项目 安装依赖: npm install mavon-editor --save 在main.js当中输入代码: import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use...
  • Github项目地址 : ...1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到,用样式主题就可以实现,基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的,比如不同两套UI的界面可...
  • 因为本文主要是讲如何把一个vue组件做成npm包并发布。 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时、有其固定的格式一样)。 二.发布到npm上的流程 一、书写一个vue组件 不用脚手架,...
  • vue多项目多模块打包

    千次阅读 2021-09-22 14:45:29
    vue多项目多模块打包 vue-cli4 为例,实现多项目的分模块打包。多项目之间共享组件和依赖,运行、打包互不干扰。 一、安装 npm install -g @vue/cli # OR yarn global add @vue/cli 二、创建项目vue create ...
  • 以下为个人理解,如理解有误敬请指出。 Vue项目做完后需要通过npm run build来打包,打包后生成的index.html...static目录就会有重名的问题需要多个项目的static文件夹放在同一个文件夹里,对各个项目的管理 更新 冲...
  • 用脚手架创建一个Vue项目

    千次阅读 2022-03-18 18:33:27
    目 录 1、安装node.js 2、查看npm 3、安装cnpm ①新建文件夹 ②通过淘宝镜像安装相关依赖 ...4、安装vue-cli脚手架构建工具 ...5、用脚手架创建vue项目 ...Vue 提供了一官方的 CLI,为我们快速搭建大型单页应用专门...
  • 基于vue2和vue-cli搭建的一款vue多页面应用脚手架,可自动生成webpack配置、模板html、入口js文件以及根组件,集成移动端适配
  • 本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考。 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,...
  • springboot项目集成vue

    千次阅读 2019-10-22 17:39:56
    随后我们的项目中会出一dist文件夹:如下图 然后将dist文件夹中的所有内容放到eclipse中的src/main/resources/static文件夹里面。(eclipse中默认是没有static文件夹的,需要你手动创建)如下图: 最后就是...
  • 主要为大家详细介绍了vue2.0条件搜索组件的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • VuePress是一很好的静态网站制作工具,如果你希望将VuePress制作的静态页面和你的主应用一起打包,那么这里可以给你提供一些思路。
  • vue 项目集成active控件

    千次阅读 2019-01-11 03:47:46
    最近的项目里面有一项功能需要集成扫描仪,在安装了扫描仪驱动后,还需要在项目里面集成其ActiveX控件,主要的问题就在于我需要扫描仪的某些方法加入一些其他操作。由于这东西是不开源的,在Google上搜索良久,也...
  • fluent-vue集成 JavaScript实现fluent-vueVue 2和Vue 3兼容 ...此monorepo包含多个软件包: -Vue.js插件 -Webpack加载器,在SFC中添加了对自定义块的支持 文献资料 正在进行的工作文档可以在这里找到: :
  • Vue基础学习之项目整合及优化

    千次阅读 2020-12-19 04:41:59
    前言使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用,我们可以使用它将复杂的文件路径定义成一变量来访问。在不使用 alias 的项目中,我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,051
精华内容 12,020
关键字:

多个vue项目集成