精华内容
下载资源
问答
  • 主要介绍了Vue-cli3生成Vue项目加载Mxgraph方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 1.基于vue创建的脚手架项目,输入指令vue create 项目名称(列如vue-app),具体如何搭建脚手架点击vue脚手架查看,搭建项目生成的相关文件 简述基于vue文件的含义 i.node_modules 此文件用来保存我们开发项目时所...

    注意:这里小博主要叙述的是搭建项目生成的文件,项目中生成的文件代表什么的含义???然后简单的示范一下如何搭建项目基于vue搭建的项目和基于webpack搭建的项目

    1.基于vue创建的脚手架项目,输入指令vue create 项目名称(列如vue-app),具体如何搭建脚手架点击vue脚手架查看
    2.基于webpack搭建的脚手架项目,输入指令vue init webpack 项目名称 (列如my-app),具体如何webpack搭建脚手架点击webpack脚手架查看

    在这里插入图片描述

    基于vue搭建项目中生成的相关文件的含义叙述

    基于vue搭建的脚手架

    简述基于vue搭建项目文件的含义
    • i.node_modules
      • 此文件用来保存我们开发项目时所下载的依赖包,将项目打包时我们不会压缩此文件
    • ii.public
      • public代表公共的意思,一般我们都用来存放静态资源,如图片
    • iii.src
      • src我们整个项目的核心文件夹,这个文件是我们用来编写文件的,此文件夹下含有assets、components、App.vue、mian.js
      • assets
        • 此文件夹用来存放我们的样式文件,图片文件资源
      • components
        • 此文件存放我们开发项目创建的组件文件,生成项目中本人含有一个helloworld.vue组件
      • App.vue
        • 我们所创建编写的组件都会import方式引入到此组件中,因为我们运行服务时,服务默认启动App.vue,并将vue文件编译解析成浏览器可识别的文件,然后给出一个访问地址localhost:8080使我们我们在浏览器中可以看到文件,但我们启动服务时,我们对代码进行修改会自动渲染到页面,因为vue是一个渐进式的框架具体详情请查看官网链接
      • mian.js
        • 整个项目的入口脚本文件
    • iv.babel.config.js
      • bable转码器用来转义成浏览器能识别的代码
    • v.package.json
      • 此文件用来存放项目的配置服务的启动以及可以查看我们使用的是哪个vue版本开发的项目
    • vi.package-lock.json
      • 此文件用来查看我们整个项目安装使用依赖包的版本以及相关信息都能查看到。
    • vii.README.md
      • 项目开发中我们对编写代码一些相关注释存放于此

    基于webpack搭建项目中生成的相关文件的含义叙述

    在这里插入图片描述

    简述基于webpack项目文件的含义,这里小博简述我们需要用到的地方
    • i.build
      • 存放webpack包文件的相关信息
    • ii.config
      • 存放webpack的配置信息
    • iii.node_modules
      • 此文件用来保存我们开发项目时所下载的依赖包,将项目打包时我们不会压缩此文件
    • iv.public
      • public代表公共的意思,一般我们都用来存放静态资源,如图片
    • v.static
      • 存放静态文件
    • vi.src
      • src我们整个项目的核心文件夹,这个文件是我们用来编写文件的,此文件夹下含有assets、components、router、App.vue、mian.js
      • assets
        • 此文件夹用来存放我们的样式文件,图片文件资源
      • components
        • 此文件存放我们开发项目创建的组件文件,生成项目中本人含有一个helloworld.vue组件
      • router
        • 路由文件,配置路由指向
      • App.vue
        • 我们所创建编写的组件都会import方式引入到此组件中,因为我们运行服务时,服务默认启动App.vue,并将vue文件编译解析成浏览器可识别的文件,然后给出一个访问地址localhost:8080使我们我们在浏览器中可以看到文件,但我们启动服务时,我们对代码进行修改会自动渲染到页面,因为vue是一个渐进式的框架具体详情请查看官网链接
      • mian.js
        • 整个项目的入口脚本文件
    • vii.babelrc
      • bable转码器用来转义成浏览器能识别的代码
    • viii.package.json
      • 查看此文件可以详细看到我们启动项目的配置以及可以查看我们使用那些依赖包的是哪个版本开发的项目,vue版本等,
    • viv.package-lock.json
      • 此文件用来查看我们整个项目安装使用依赖包的版本以及相关信息都能查看到。
    • vv.README.md
      • 项目开发中我们对编写代码一些相关注释存放于此
    展开全文
  • vue 项目中 自动生成 二维码

    千次阅读 2019-10-21 17:23:43
    ​ 最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRcode vue-qr vue-qr比QRcode功能多在可以在...

    vue 项目中 自动生成 二维码

    ​ 最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种:

    1. QRcode
    2. vue-qr

    vue-qr比QRcode功能多在可以在中间加logo,而且好像更方便一点,具体的 小编也没试,小编需要的二维码不需要那么 多骚操作,就选择了第一种,至于要写这篇博客的目的是为说一下,运用中遇到的问题及解决方法。

    下面先介绍QRcode

    vue里安装qrcodejs的npm包

    npm install qrcodejs2  -save     -s  // 上线需要的包,打包的时候也会打包
    

    页面引用

    import QRCode from 'qrcodejs2'    //   直接在需要用的页面 写就行不需要注意路径问题
    

    二维码展示的盒子

    <div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
    
    methods: {
      creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {  // 这里选择器也可以直接写 'qrcode' 用的是id选择器   指示不需要带 # 而已
          text: 'xxxx',  //  生成二维码的 内容
          width: 100,    //  宽   单位 px
          height: 100,   //  高   单位 px 
          // render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)  
          // background: '#f0f'  
          // foreground: '#ff0'  
          correctLevel: QRCode.CorrectLevel.H   // 二维码容错 级别
         })
      }
    },
    
    mounted() {
    	   this.creatQrCode(); // 这里会是一个重点,下面会解释
    	  }
    

    点击下载二维码:

    	// 点击下载app二维码
        downloadAppCodeImg (name) {
          var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
          var a = document.createElement("a");
          var event = new MouseEvent("click"); // 创建一个单击事件
          a.href = canvasData[0].toDataURL("image/png");;
          a.download = "drcQrcode";
          a.dispatchEvent(event); // 触发a的单击事件
        },
    
    

    好了,现在就可以了 简单吧? 当然这只是正常的情况,也是官网上介绍的用法,实际上 ,你会遇到一个错误例如:

    ### vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'appendChild' of null"
    
    ### found in
    
    ### ---> <Home> at src/script/view/home.vue
        ###   <ScrollBar> at src/script/component/scroll_bar.vue
           ###  <Frame> at src/script/component/frame.vue
              ### <App> at src/script/App.vue
                ### <Root>
    ### warn @ vue.runtime.esm.js?2b0e:619
    ### logError @ vue.runtime.esm.js?2b0e:1884
    ### globalHandleError @ vue.runtime.esm.js?2b0e:1879
    ### handleError @ vue.runtime.esm.js?2b0e:1839
    ### invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
    ### invoker @ vue.runtime.esm.js?2b0e:2179
    ### original._wrapper @ vue.runtime.esm.js?2b0e:6911
    ### vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'appendChild' of null
        ### at new Drawing (qrcode.js?d044:370)
        ### at new QRCode (qrcode.js?d044:579)
        ### at VueComponent.creatQrCode (home.vue?afc8:120)
        ### at VueComponent.dianJiZhanShi (home.vue?afc8:175)
        ### at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
        ### at HTMLAnchorElement.invoker (vue.runtime.esm.js?2b0e:2179)
        ### at HTMLAnchorElement.or
    

    看到这个报错是不是第一印象 就是 appendChild 未定义就使用了? 所以我 全局搜索发现 没有这个字段;

    接下来 你仔细 看 发现 它是定义在 qrcode.js 里面的 ,我怀疑是引入 js 造成 的 ,所以我又 手动引入一次 把它相对的路径都 写了进来,发现 还是报错; 思考之后又怀疑是生命周期函数的原因 ,因为 created 函数在 data 已有 DOM 还没有创建完成 ,可能会造成它找不到要插入的 DOM元素,所以我再次 把函数调用放在了 mounted

    函数里面 ,mounted 生命周期函数中 页面已经渲染完成,DOM 节点也已经创建,应该是没问题的,结果还是报错; 后来我干脆把它放在了methods 一个 函数里面去调用,发现点击的时候还是报同样的错。 我就意识到,是我有一部分没意识到,或者说给忽略了。 我 仔细研究后发现

    // this.$nextTick (function () {
            //   this.creatQrCode();   //  这个函数 要在 this.$nextTick 里面调用   才不会报错
            // })
    

    当然 我这里还有点波折 ,我的HTML 元素 也就是上面的

    是在 一个遮盖层的 组件只能存在的,点击的时候才显示这个遮盖层,所以在生命周期函数里面,调用这个函数哪怕配合使用 this.$nextTick 调用也是不合适的。

    希望 我的经验能帮到你

    nextTick 简单介绍

    下面是我的代码关于二维码的这一部分

        <!-- 二维码遮盖层 -->
            <div class="homeStyle">
                <van-popup v-model="show">
                  <div class="qrcode" ref="qrCodeUrl" id="qrcode"> </div>
                </van-popup>
            </div>
    
    import {
        DropdownItem,
        DropdownMenu,
        Grid,
        GridItem,
        Icon,
        Popup,
        Radio,
        RadioGroup,
        Swipe,
        SwipeItem,
        Tabbar,
        TabbarItem
      } from 'vant'
    
     import store from 'store'
     import Vue from 'vue'
     import axios from 'axios'
     import QRCode from 'qrcodejs2'
    
     // 生成二维码函数
    
          creatQrCode() {
            let cardNo = store.get('__cardNo__')
            log.info(cardNo,'二维码生成')
            var qrcode = new QRCode('qrcode', {
                text: cardNo ,
                width: 150,
                height: 150,
                // background: '#f0f',   // 背景色
                // foreground: '#ff0'    // 前景色
               
            })
            //  log.info(qrcode,'qrcode66666666666666666666666666') 
          },
            
            
            
             dianJiZhanShi () {
                // this.creatQrCode();
                // 点击展示二维码
                this.show = !this.show
                this.$nextTick (function () {
                  this.creatQrCode();
                })
          },
    

    下面补充一点知识:

    微信长按识别二维码,在 vue 项目中的实现

    微信长按识别二维码是 QQ 浏览器的内置功能,该功能的基础一定要使用 img 标签引入图片,其他方式的二维码无法识别。

    在 vue 中使用 QrcodeVue 插件

    • demo1 在 template 标签中直接使用
    <qrcode-vue :value="codeUrl" :size="size" level="H"></qrcode-vue>
    

    在微信中长按无法识别二维码

    正确的做法

    使用 qrcode 插件

    • 在 template 标签中是使用 img 标签引入
    <template>
      <div>
        <p>长按识别二维码支付</p>
        <div id="code">
          <img class="code" :src="url" alt="">
        </div>
      </div>
    </template>
    
    • 在 methods 方法里面生成二维码图片后加入 img 中即可
    methods: {
                QRCode.toDataURL('自定义的内容,可传参')
                  .then(url => {
                    this.url = url
                  })
                  .catch(err => {
                    console.error(err)
                  })
    }
    
    展开全文
  • Vue-cli3 生成Vue 项目加载Mxgraph

    千次阅读 2019-01-24 17:35:24
    使用Vue-cli3生成Vue项目,并等待项目创建成功。 vue create [项目名] 安装mxgraph。 cnpm install mxgraph --save 安装exports-loader。 cnpm install exports-loader --save 安装script-loader。 cnpm install ...

    使用Vue-cli3生成Vue项目,并等待项目创建成功。

    vue create [项目名]
    

    安装mxgraph。

    cnpm install mxgraph --save
    

    安装exports-loader。

    cnpm install exports-loader --save
    

    安装script-loader。

    cnpm install script-loader --save
    

    在项目根目录新建vue.config.js文件。

    将以下内容复制到vue.config.js文件中。

    const path = require('path');
    
    function resolve(dir) {
        return path.join(__dirname, dir);
    }
    
    module.exports = {
        publicPath: './',
        outputDir: 'dist',
        lintOnSave: true,
        chainWebpack: (config) => {
            config.module
                .rule('')
                .test(/mxClient\.js$/)
                .use('exports-loader')
                .loader('exports-loader?mxClient,mxGraphModel,mxActor,mxShape,mxEventObject,mxGraph,mxPrintPreview,mxEventSource,mxRectangle,mxVertexHandler,mxMouseEvent,mxGraphView,mxImage,mxGeometry,mxRubberband,mxKeyHandler,mxDragSource,mxGraphModel,mxEvent,mxUtils,mxWindow,mxEvent,mxCodec,mxCell,mxConstants,mxPoint,mxGraphHandler,mxCylinder,mxCellRenderer,mxEvent,mxUndoManager')
                .end();
            config.resolve.alias
                .set('@', resolve('src'))
                .set('@assets', resolve('src/assets'));
            // 按这种格式.set('', resolve('')) 自己添加
        }
    };
    
    

    修改HelloWorld.vue,替换为以下内容。

    <template>
        <div ref="graph_container"></div>
    </template>
    
    <script>
    import {
        mxGraph
    } from 'mxgraph/javascript/mxClient';
    
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            // Creates the graph inside the given container
            var graph = new mxGraph(this.$refs.graph_container);
    
            // Gets the default parent for inserting new cells. This
            // is normally the first child of the root (ie. layer 0).
            var parent = graph.getDefaultParent();
    
            // Adds cells to the model in a single step
            graph.getModel().beginUpdate();
            try {
                let v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                let v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
    
                graph.insertEdge(parent, null, '', v1, v2);
            } finally {
                // Updates the display
                graph.getModel().endUpdate();
            }
        }
    };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
        margin: 40px 0 0;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    li {
        display: inline-block;
        margin: 0 10px;
    }
    
    a {
        color: #42b983;
    }
    </style>
    
    

    运行项目,查看效果。此Demo的源码可以查看

    展开全文
  • 用vue-cli快速生成vue项目

    千次阅读 2018-08-15 13:13:16
    一、全局安装webpack npm install webpack -g ...四、生成项目  vue init webpack project_name 五、安装依赖模块  在项目文件夹内打开cmd npm install 六、开发环境运行 npm run dev 七、配置篇 ...

    一、全局安装webpack

    npm install webpack -g

    二、安装node

    三、全局安装vue-cli

    npm install vue-cli -g

    四、生成项目 

    vue init webpack project_name

    五、安装依赖模块 

    在项目文件夹内打开cmd

    npm install

    六、开发环境运行

    npm run dev

    七、配置篇

    1、开发环境编译后自动打开浏览器

    修改confog/index.js里面的autoOpenBrowser为true。 

    2、打包后空白问题修复

     修改confog/index.js里面的build对象中的assetsPublicPath为./。 

     

    3、打包后图片路径问题

     在build/utils.js里面的fallback后面添加publicPath: '../../'。 

    展开全文
  • vue项目中动态生成form表单

    万次阅读 2019-06-28 15:02:52
    在我的这次项目(vue+element)中,有这样一个需求。类似于 (a || b && c) || ((a || b) && c) && (a || b) 这样的表达式,动态生成且和或组成的逻辑关系。具体的还是看图吧 绿色框是一个...
  • 通过vue-cli的命令选项可以生成打包报告 --report选项可以生成report.html 以帮助分析报告内 在vue控制台生成打包报告 点击任务=>build=>运行 运行完毕, 点击右侧分析,控制台面板查看报告 通过控制台和...
  • Vue项目打包如何生成多个HTML

    千次阅读 2020-08-21 09:48:31
    Vue项目打包如何生成多个HTML介绍配置 介绍 vue配置打包一般都是生成一个html页面,如果我们项目需要生成两个或者多个html页面我们应该如何操作呢?其实我们只需要修改webpack配置就可以了 配置 [外链图片转存失败,...
  • Hbulid打包vue-cli项目生成APK

    万次阅读 2017-09-19 16:03:58
    之前写过不少移动APP项目,但是平时写的Vue-cli项目都只在浏览器开发运行的,今天稍微写一下使用Hbulid打包Vue-cli项目生成APK的大致流程吧 1.准备已有的Vue-cli搭建的webAPP项目 确保 npm run dev 命令能正常运行...
  • vue项目使用uniapp生成app过程

    千次阅读 2019-08-31 19:27:20
    1. npm run build 打包vue项目 2. 在 HbuilderX 新建 5+app 项目 3. 打包好的项目 dist 文件夹下的文件全部复制,拷贝到新建项目的根目录,有重复的直接覆盖 4. 配置启动头 打开新建项目的 manifest.json文件 >...
  • 基于 Vue CLI 3 快速生成 Vue 项目的初步封装,组装或必要的零件,开箱即用
  • 在博主的稍前一篇文章中,写到vue中关于信息生成二维码的方法,生成的二维码图片是canvas所绘制,在手机端我们往往需要手机二维码图片可以保存到本地,该如何操作呢。 首先,假使生成的二维码图片挂载在id为...
  • vue项目中 页面生成pdf并下载,vue 中页面转PDF

    万次阅读 热门讨论 2019-06-29 16:54:15
    方法一 第一步、安装插件 ...图片生成pdf npm install jspdf --save  第二步、定义全局函数,创建一个htmlToPdf.js文件在指定位置.例如放在('src/utils/html2pdf') // 导出页面为PDF格式 import html2...
  • vue-cli生成的基本项目

    2019-02-11 20:59:57
    vue-cli生成的基本项目,最基本的东西,使用vue init webpack myproject命令生成
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • 将vue-cli3生成项目提交到GitHub 初始化 由于我使用的是脚手架,项目应该是已经初始化了,使用下面这个命令他告诉我项目已经被初始化 Reinitialized existing Git repository in G:/demo/vue-test/.git/ 已在g:/...
  • 1. 安装一个插件,识别vue文件 2.新建代码片段 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { Print to console: { prefix: vue, body: [ , , $5 , , ...
  • 命令行生成vue项目框架

    万次阅读 2016-09-28 14:48:16
    命令行生成vue项目框架
  • 关于vue项目生成二维码

    千次阅读 2018-10-16 14:10:03
    1、经过本人测试,这个插件可以生成二维码,就是 vue-qr    首先 npm install vue-qr --save  然后在你需要使用的组件里引入 然后在组件里面注册组件VueQr 在项目中使用,则是 然后赋值config.value...
  • 主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 本文介绍了webpack编译vue项目生成的代码探索,分享给大家,具体如下: 前言 往 main.js 里写入最简单的 vue 项目结构如下 import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', ...
  • webpack打包vue项目之后生成的dist文件该怎么启动运行 亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run ...
  • 项目中某些功能要用到二维码,比如说某个下载链接,对于移动端用户来说,我们不能只展示一个url,让用户自己复制去下载。或者h5页面,此时就需要展示一个二维码来给用户,让用户直接扫码进入链接。 分析 当初在设计...
  • vue项目打包后生成一个配置文件可以修改打包后的服务器api地址 问题描述:vue项目打包上线之后,如果要改服务器api地址,只能在源码更改然后重新打包发布,为了解决这个问题,我们可以在static增加一个config.json...
  • Vue/cli 3.0生成项目目录解析

    千次阅读 2019-02-27 06:00:40
    vue init到现在vue3.0时代,仔细观察后发现使用脚手架生成项目目录结构有很大的调整,今天我就整理下vue/cli 3.0脚手架在生成项目后目录中各个文件的解析。 使用vue/cli 创建项目 在使用vue/cli 之前需要安装...
  • Vue项目打包生成后音频文件消失

    千次阅读 2018-03-15 15:55:54
    一个正常项目中,对于前端img,js,css,audios,viedo等文件是必不可少的~上篇文章已经讲部署时js,css,img资源的路径问题~这期呢,主要讲的就是关于打包后音频消失了~瞬身之术~如图: 我的音频文件呢,说的好...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,585
精华内容 31,834
关键字:

vue将项目重新生成

vue 订阅