精华内容
下载资源
问答
  • 分享一个前端管理系统的架子,vue-web-os,仿Windows10操作系统云桌面
    千次阅读
    2020-02-20 18:41:11

    前言(请允许我抒发一下情感)

    前几天老大突然要搞一个OA系统,也就是我们自己公司用的办公软件,打算整的花里胡哨一些,当时老大看上了一个仿Windows的云桌面,我本来是不打算弄这个的,感觉这种东西花里胡哨,不适合快速开发,但是毕竟“上有命,下不得不为之”,我绝对起手整一个。

    但是从git上找遍了许久都没有发现类似项目,外面找的也是收费的,唯一找到的一个技术老的可怜,都停止维护了,于是开始自己做了一套,目前也进行使用了,给大家分享一下吧。

    动真格的了

    GitHub地址:vue-web-os:https://github.com/a241978181/vue-web-os

    展示网址:http://www.jxys.top:1000/#/layout

    具体介绍里面都有,大家不妨看一下,应该不会让大家失望的,以后还会不停的维护升级,绝对把它变得很完美。

    更多相关内容
  • npm install vue-web-cam --save // or yarn add vue-web-cam 用法 import Vue from 'vue' import WebCam from "../../src" ; Vue . use ( WebCam ) ; < vue> // or import { WebCam } from "vue-web-cam" ; ...
  • @quannt在vuejs中内置的示例Web组件 该小部件是使用并使用编译成一个Web组件。 最终的构建文件位于dist文件夹下。 您可以从localhost提供index.html来查看运行中的小部件。 构建设置 # install dependencies $ ...
  • npm i vue-web-speech 用法 通过Vue.use将插件注入到vue实例 import Vue from 'vue' import VueWebSpeech from 'vue-web-speech' ... Vue . use ( VueWebSpeech ) 然后将其用作组件 < vue xss=removed xss=...
  • 使用Vue.js和Web蓝牙API的心律应用 然后克隆此仓库: npm install npm run serve 玩得开心!
  • $ vue create --preset kocal/vue-web-extension my-extension $ cd my-extension $ npm run build npm run build 将扩展程序构建到dist文件夹中以进行生产。 还构建了一个zip文件,该文件位于artifacts目录中。 ...
  • Vue Web组件演示 丹尼斯·汉堡,Poort80阿姆斯特丹,2018年9月 这是一个使用VueJS的vue-cli v3.x从Vue组件构建W3C Web组件的小演示。 然后,可以将具有定制HTML标签的此定制Web组件放到(非Vue)网页中。 或使用任何...
  • vue-uweb vuejs 友盟统计埋点插件 1. 安装 npm install vue-uweb --save 直接在页面中引用 [removed][removed] 或通过es6模块加载 import uweb from 'vue-uweb' 使用 vue-uweb 插件 Vue.use(uweb,'YOUR_SITEID_HERE'...
  • 目录 演示版 您可以在查看Vue-custom-element... 要使用vue-cli构建Web组件,必须使用以下命令: vue-cli-service build --target lib --name your-component-name src/main.js 注意:命令vue-cli-service build --ta
  • Trading-vue-js-web-component-example 使用vue-custom-element将trading-vue-js包装为Web组件 为什么? 非常棒,我非常希望能够在基于 (网络组件)的项目中使用它。 此回购充当如何完成此操作的示例。 如何? ...
  • Vue + Web +原生 该项目尚处于开发阶段,仍处于早期阶段。 Vue + Web + Native是基于和的样板,允许同时开发Web和本机应用程序。 内容 开始之前 Vue + Web + Native使用编译所有文件。 这些是主要功能。 最新版本...
  • 存储的键自动JSON.stringify和JSON.parse用于交叉表通信的事件安装#yarn yarn添加vue-web-storage#npm npm install vue-web-storage --save用法从'vue'导入Vue; 从'vue-web-storage'导入存储; Vue.use(存储); ...
  • vue3实现的svg可视化web布局编辑器。主要用于物联网mqtt实时系统图 预览地址 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git # 进入项目目录 cd vue-webtopo-svgeditor #...
  • vue项目,package.json中Vuevue-template-compiler版本不一致时...- vue@2.5.10 (E:\美好家\beauty_web\move\node_modules\vue\dist\vue.runtime.common.js) - vue-template-compiler@2.6.10 (E:\美好家\beauty_web\
  • 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案,作为Vue样板。 基于 预览: : 主页: : 文档: : 变更日志: : 常见问题解答: : 概述 环境和依赖 节点 纱 网页包 埃斯林特 @ vue / cli〜3 -Vue...
  • 这用于保护您的Web应用程序免受机器人攻击。 演示I vue-drag-verify这是一个vue组件,可以滑动以解锁以进行登录或注册。 这用于保护您的Web应用程序免受机器人攻击。 演示安装npm install vue-drag-verify --save...
  • Vue2与Progressive Web App上的Google Cloud Speech执行同步语音识别 设定档 步骤1 为该项目启用Cloud Speech API。 第2步 在Speech.vue初始化Firebase apiKey: " " 安装 # Git Clone Project git clone git@...
  • vue-element-admin开发后台权限模块

    千人学习 2020-09-15 11:55:29
    本课程是基于vue-element-admin实现的后台权限验证系统,解决在前后端分离场景下如何实现前端菜单访问的动态权限以及如何在脚手架中进行接口的封装调用,您将学习到如下知识: 1、学习如何使用后台集成框架vue-...
  • 一个vue.js软件包,允许对Web应用程序进行本地化。 目录 问题 该软件包在很大程度上受到了启发。 该软件包可通过使用Google翻译对vue制作的Web应用程序进行本地化。 随着网站和应用程序的发展,您可能需要扩展到...
  • 离子Vue模板 基于Web的混合移动Web开发的可扩展模板 特征 用于构建Web和移动应用程序捆绑包的工具。 Vue 3 Composition API。 模块系统(受启发)。 在的帮助下自动更新依赖项。 随得更。 的单元测试和的e2e。 指令...
  • -检查vuejs / vue-web-component-wrapper目录演示安装说明示例示例最后-官方Web组件实现! -检查vuejs / vue-web-component-wrapper目录演示安装说明示例浏览器支持选项如何工作? 测试警告演示您可以在...
  • Zendesk Web Widget的Vue.js插件 该插件可让您配置和添加Zendesk Web Widget 设置 将带有yarn或npm的@dansmaculotte/vue-zendesk依赖项添加到您的项目中 配置它: import Vue from 'vue' import Zendesk from '@...
  • 极速、零配置的 web 应用打包工具, 同时支持 react 和 vue 的单页面应用,提供开箱即用支持 ,基于 webpack4.x webpack-react-vue-spa-awesome-config webpack-react-vue-spa-awesome-config 是一个命令行工具,也可以...
  • vue-loader&vue-template-compiler详解

    万次阅读 2020-02-29 16:29:34
    vue 工程中,安装依赖时,需要 vuevue-template-compiler 版本必须保持一致,否则会报错。 Module build failed: Error: Cannot find module ‘vue-template-compiler’ 为什么二者版本必须一致呢?vue-...

    在 vue 工程中,安装依赖时,需要 vue 和 vue-template-compiler 版本必须保持一致,否则会报错。

    Module build failed: Error: Cannot find module ‘vue-template-compiler’

    为什么二者版本必须一致呢?vue-template-compiler 承担哪些作用?其和 vue-loader 又有何关联?

    在这里插入图片描述

    vue-template-compiler

    作用: 该模块可用于将 Vue 2.0 模板预编译为渲染函数(template => ast => render),以避免运行时编译开销和 CSP 限制。大都数场景下,与 vue-loader一起使用,只有在编写具有非常特定需求的构建工具时,才需要单独使用它

    内容安全策略 (CSP) 是一个附加的安全层,用于帮助检测和缓解某些类型的攻击,包括跨站脚本 (XSS) 和数据注入等攻击。

    需要注意的是,This package is auto-generated. For pull requests please see src/platforms/web/entry-compiler.js.这个包是自动生成的,请查看 entry-compiler.js 文件。

    其文件路径,vue/src/platforms/web/entry-compiler.js

    export { parseComponent } from 'sfc/parser'
    export { compile, compileToFunctions } from './compiler/index'
    export { ssrCompile, ssrCompileToFunctions } from './server/compiler'
    export { generateCodeFrame } from 'compiler/codeframe'
    

    可得知,vue-template-compiler 的代码是从 vue 源码中抽离的!接着,我们对比一下 vue-template-compiler 和 vue 关于编译的 API。发现对于 compile 等函数是一致,只是 vue-template-compiler 开放的参数和方法更多。因此,vuevue-template-compiler 的版本必须一致(同一份源码)!

    const compiler = require('vue-template-compiler')
    
    const result = compiler.compile(`
      <div id="test">
        <div>
          <p>This is my vue render test</p>
        </div>
        <p>my name is {{myName}}</p>
      </div>`
    )
    
    console.log(result)
    

    compiler.compile(template, [options])

    {
      ast: ASTElement, // 解析模板生成的ast
      render: string,	 // 渲染函数
      staticRenderFns: Array<string>, // 静态子树
      errors: Array<string>,
      tips: Array<string>
    }
    
    {
      ast: {
        type: 1,
        tag: 'div',
        attrsList: [ [Object] ],
        attrsMap: { id: 'test' },
        rawAttrsMap: {},
        parent: undefined,
        children: [ [Object], [Object], [Object] ],
        plain: false,
        attrs: [ [Object] ],
        static: false,
        staticRoot: false
      },
      render: `with(this){return _c('div',{attrs:{"id":"test"}},[
    		_m(0),			// 上述提到的静态子树,索引为0 <div><p>This is my vue render test</p></div>
    		_v(" "),		// 空白节点 </div> <p> 之间的换行内容
    		_c('p',[_v("my name is "+_s(myName))])	// <p>my name is {{myName}}</p>
    	])}`,
      staticRenderFns: [
        `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
      ],
      errors: [],
      tips: []
    }
    

    需要注意的是:children 存在3个节点,其中第二个为空节点 { type: 3, text: ' ', static: true } 即代码中的</div><p> 之间的内容。

    compiler.compileToFunctions(template)

    简化版的 compiler.compile() ,但只返回

    {
      render: Function,
      staticRenderFns: Array<Function>
    }
    

    其通过 new Function() 方式

    compiler.parseComponent(file, [options])

    将 SFC (单文件组件或* .vue文件)解析为描述符「以下述提供SFC为例」

    {
      template: {
        type: 'template',
        content: '\n<div class="example">{{ msg }}</div>\n',
        start: 10,
        attrs: {},
        end: 54
      },
      script: {
        type: 'script',
        content: '\n' +
          'export default {\n' +
          '  data () {\n' +
          '    return {\n' +
          "      msg: 'Hello world!'\n" +
          '    }\n' +
          '  }\n' +
          '}\n',
        start: 77,
        attrs: {},
        end: 174
      },
      styles: [
        {
          type: 'style',
          content: '\n.example {\n  color: red;\n}\n',
          start: 194,
          attrs: {},
          end: 236
        }
      ],
      customBlocks: [
        {
          type: 'custom1',
          content: '自定义块',
          start: 257,
          attrs: {},
           end: 261
        }
      ],
      errors: []
    }
    

    通常用于 SFC 构建工具,如 vue-loader、vueify等

    compiler.generateCodeFrame(template, start, end)

    高亮展示 start,end 代码段。

    compiler.generateCodeFrame(`上述代码`, 15, 20)
    1  |  <template>
    2  |      <div class="example">{{ msg }}</div>
       |      ^^^^^
    3  |    </template>
    

    简介解析过程

    入口文件 src/compiller/index.js

    // 生成ast语法树
    const ast = parse(template.trim(), options)
    // 标记静态内容(以免diff的时候需要重复比较)
    optimize(ast, options)
    // 生成 render function code
    const code = generate(ast, options)
    

    vue-loader

    webpack loader for Vue Single-File Components.
    用于 Vue 单文件组件的 webpack 加载器。

    Vue Single-File Components

    *.vue 文件是一种自定义文件格式,使用类似于 HTML 的语法来描述 Vue 组件。每个 *.vue 文件都包含三种类型的顶级语言块:<template><script><style>,以及其他可选的自定义块:

    <template>
      <div class="example">{{ msg }}</div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          msg: 'Hello world!'
        }
      }
    }
    </script>
    
    <style>
    .example {
      color: red;
    }
    </style>
    
    <custom1>自定义块</custom1>
    

    vue-loader 将解析文件,提取每个语言块,如有必要,将它们通过其他加载器进行管道传输,最后将它们组装回ES 模块,其默认导出为 Vue.js 组件选项对象。

    • Template:每个*.vue. 文件一次最多可以包含一个 <template> 块;内容将被提取并传递给 vue-template-compiler 并预编译为 JavaScript 渲染函数,最后注入<script> 部分的导出组件中

    • Script: 每个 *.vue. 文件一次最多可以包含一个 <script> 块;任何针对 .js 文件的 webpack rules 都将应用于 <script> 块中的内容

    • Style: 默认匹配/\.css$/;可以包含多个 <style> 块;可以包含 Scoped 或者 module 属性;任何针对 .css 文件的 webpack rules 都将应用于 <style> 块中的内容

    • Custom Blocks: 自定义块,以满足任何项目的特定需求

    如果您希望将 *.vue. 组件拆分为多个文件,则可以使用 src 属性为语言块导入外部文件:

    <template src="./template.html"></template>
    <style src="./style.css"></style>
    <script src="./script.js"></script>
    
    • 相对路径必须以 ./ 开头
    • 可以从 npm 依赖项导入资源

    如何工作

    处理 SFC 中的每个语言块,然后组装成最终模块。

    1. 使用 @vue/component-compiler-utils 解析 SFC 为每个语言块生成一个导入

      // import the <template> block
      import render from 'source.vue?vue&type=template'
      // import the <script> block
      import script from 'source.vue?vue&type=script'
      export * from 'source.vue?vue&type=script'
      // import <style> blocks
      import 'source.vue?vue&type=style&index=1'
      
      script.render = render
      export default script
      
    2. 对相应语言块,增加其他处理规则

      import script from 'babel-loader!vue-loader!source.vue?vue&type=script'
      import 'source.vue?vue&type=style&index=1&scoped&lang=scss'
      
    3. 处理扩展请求时,再次调用 vue-loader,但这次会明确将其传递给匹配的目标加载器

    4. 对于 scoped 等进行处理(VueLoaderPlugin 会注入一个全局的Pitching Loader(src/pitcher.ts),它会拦截Vue的 <template><style>请求并注入必要的加载器)

    参考地址

    • https://astexplorer.net/
    • https://github.com/vuejs/vue/tree/v2.6.10/packages/vue-template-compiler
    • https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP
    • https://github.com/vuejs/vue-loader/blob/master/docs/spec.md
    • https://github.com/vuejs/vue-loader/blob/master/docs/guide/custom-blocks.md
    展开全文
  • 基于vue-command的web终端

    千次阅读 2020-05-28 12:53:27
    使用vue-command开发web终端,不知道能不能完成,在此记录遇到的坑。 基本没有什么资料,找到的都是英文,如果有朋友们遇到好的资料,请留言分享,万分感谢。 1、安装 直接按照官网给出的命令安装vue-command ...

    使用vue-command开发web终端,不知道能不能完成,在此记录遇到的坑。

    基本没有什么资料,找到的都是英文,如果有朋友们遇到好的资料,请留言分享,万分感谢。

    1、安装

    直接按照官网给出的命令安装vue-command

    npm i vue-command --save

    2、简单示例

    安装完成后在vue新建页面,引入vue-command和对应的css

    <template>
      <vue-command :commands="commands" />
    </template>
    
    <script>
    import VueCommand, { createStdout } from 'vue-command'
    import 'vue-command/dist/vue-command.css'
    
    export default {
      components: {
        VueCommand
      },
    
      data: () =>  ({
        commands: { 
          'hello-world': () => createStdout('Hello world') 
        }
      })
    }
    </script>

    简单的示例,完全是官网的例子,可以运行,得到的基本是这样的。

    很简单,然后就没有然后了,对于一个拿来党来说,太难了

    自己根据api添加事件,名称,终端标志等。

    <template>
      <vue-command :commands="commands" title="收入分摊终端模块" :history=history :not-found="notFound" :pointer="pointer" @input="inputLater" @execute="executing">
        <template slot="prompt" slot-scope="prompt">
          <span class="term-ps" >
          {{ prompter }}
          </span>
        </template>
      </vue-command>
    
    </template>
    
    <script>
      import VueCommand from 'vue-command'
      import 'vue-command/dist/vue-command.css'
    
      import NanoEditor from './NanoEditor.vue'
    
      export default {
        data() {
          return {
            pointer: 3,
            prompter: '[RAS~]$',
            notFound: '您输入的指令不存在,请重新输入.',
            history: [],
            commands: {
              nano: () => NanoEditor
            }
          }
        },
        components: {
          VueCommand
        },
        methods:{
          inputLater(a){
            console.log(111)
            console.log(a)
          },
          executing(e,k) {
            console.log('executing')
            console.log(e)
            console.log(k)
          }
        }
      }
    </script>
    

    与后台交互的例子

    父页面

    <template>
      <vue-command
        ref="terminal"
        :commands="commands"
        :history="history"
        :hide-bar="hideBar"
        :is-in-progress="isInProgress"
        :not-found="notFound"
        :pointer="pointer"
        :stdin="stdin"
        :stdout="stdout"
        :intro="intro"
        :show-intro="showIntroFlag"
        :show-help="showHelpFlag"
        title="终端模块"
        @input="inputLater"
        @execute="executing"
        @executed="executed"
      >
        <template slot="prompt" slot-scope="prompt">
          <span class="term-ps" >
            {{ prompter }}
          </span>
        </template>
      </vue-command>
    
    </template>
    
    <script>
    import VueCommand, { createStdout, createStderr, createDummyStdout } from 'vue-command'
    import 'vue-command/dist/vue-command.css'
    import NanoEditor from './NanoEditor.vue'
    import ChuckNorris from './ChuckNorris'
    
    const PROMPT = '[RAS~]$'
    export default {
      components: {
        VueCommand
      },
      data() {
        return {
          showHelpFlag: true,
          showIntroFlag: true,
          intro: '一些东西需要执行',
          isInProgress: false,
          hideBar: false,
          stdout: '',
          stdin: '',
          pointer: 3,
          prompter: '[RAS~]$',
          notFound: '您输入的指令不存在,请重新输入.',
          history: [],
          commands: {
            cd: undefined,
            norris: () => ChuckNorris,
            nano: () => NanoEditor,
            'hello': () => createStdout('Hello world'),
            'help': () => createStdout(`Available programms:<br><br>
            &nbsp;cd [dir]<br>
            &nbsp;clear<br>
            &nbsp;hello-world<br>
            &nbsp;klieh<br>
            &nbsp;loading [--amount n] [--timeout n]<br>
            &nbsp;nano<br>
            &nbsp;norris<br>
            &nbsp;pokedex pokemon --color<br>
            &nbsp;pwd<br>
            &nbsp;reverse text<br>
          `)
          }
        }
      },
      created() {
        this.commands.cd = ({ _ }) => {
          if ((_[1] === 'home' || _[1] === 'home/') && this.prompt === PROMPT) {
            this.prompt = `${PROMPT}home`
    
            return createDummyStdout()
          }
    
          // Navigate from home to root
          if ((_[1] === '../' || _[1] === '..') && this.prompt === `${PROMPT}home`) {
            this.prompt = PROMPT
    
            return createDummyStdout()
          }
    
          // Navigate to self
          if (_[1] === '.' || _[1] === './' || typeof _[1] === 'undefined') {
            return createDummyStdout()
          }
    
          return createStderr(`cd: ${_[1]}: No such file or directory`)
        }
      },
      methods: {
        setHistory(data) {
          this.$refs.terminal.history.push(data)
        },
        inputLater(a) {
          console.log(111)
          console.log(a)
        },
        executing(e, k) {
          this.setIsInProgress = true
          // this.isInProgress = true
          this.stdin = '执行中....'
          this.stdout = '执行了'
          createStdout('执行中....')
          console.log('executing')
          console.log(e)
          console.log(k)
        },
        executed(e, k) {
          // this.isInProgress = false
          this.setIsInProgress = true
          console.log('executed')
          console.log(e)
          console.log(k)
        }
      }
    }
    </script>
    

    子页面

    <template>
      <div>
        <span v-if="!isLoading && !isError">{{ joke }}</span>
        <span v-if="isLoading && !isError">Loading ...</span>
        <span v-if="isError">There was an error getting the joke</span>
      </div>
    </template>
    
    <script>
    const API = 'https://www.baidu.com'
    const API_TIMEOUT = 5000 // 5 seconds
    
    export default {
      inject: ['terminate'],
    
      data: () => ({
        abortController: new AbortController(),
        isError: false,
        isLoading: true,
        joke: ''
      }),
    
      async mounted() {
        // Abort getting joke when API request takes longer than defined in "API_TIMEOUT"
        setTimeout(() => {
          if (this.isLoading) {
            this.abortController.abort()
          }
        }, API_TIMEOUT)
    
        try {
          const response = await fetch(API, { signal: this.abortController.signal })
          if (!response.ok) {
            this.setIsError(true)
            this.terminate()
    
            return
          }
    
          const { value } = await response.json()
          this.joke = value
        } catch (error) {
          this.setIsError(true)
        } finally {
          this.isLoading = false
          this.terminate()
        }
      },
    
      methods: {
        setIsError(isError) {
          this.isError = isError
        }
      }
    }
    </script>
    

    3、遇到的问题

    a.使用prompt,根据官网示例,运行后控制台报错

    Duplicate presence of slot "prompt" found in the same render tree - this will likely cause render er

    这个遍历使用slot,可以使用作用域插槽,直接代码

    <template slot="prompt" slot-scope="prompt">
        <span class="term-ps"  >
          {{ prompter }}
        </span>
    </template>

    b.prompt使用时候不能重复使用这个单词,比如上个代码段{{prompter}} 这个不能定义为prompt ,不知道什么原因

    c.这个真不适合我这种新手

    建议还是用xterm吧

    展开全文
  • Vue组件包装为Web组件/自定义元素
  • vue-worker以一种简单的方式使用webworkers的Vue插件
  • electron-vue-template 安装依赖 git clone https://github.com/luohao8023/electron-vue-template.git cd electron-vue-template npm install 调试客户端 npm run dev dev npm run dev test npm run dev npm run ...
  • Koa-Vue-Notes-Web这是一个简单的SPA,使用Koa作为后端,Vue作为第一个前端,React作为第二个前端构建。 前端Vue GitHu Koa-Vue-Notes-Web这是一个简单的SPA,使用Koa作为后端,Vue作为第一个前端,React作为第二个...
  • vue-window简介最近的Web应用程序主要用于移动环境。 因此,窗口UI不再是主流。 但是,窗口UI是Vue-Window。简介最近的Web应用程序主要用于移动环境。 因此,窗口UI不再是主流。 但是,窗口UI对于PC环境的专业Web...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 148,661
精华内容 59,464
关键字:

vue-web

友情链接: 基础实验例程.zip