ICode9

精准搜索请尝试: 精确搜索
  • Vue3.2 setup语法糖中组件的 name 属性如何定义2022-08-23 21:00:10

    方案一: 增加一个脚本标签 <script lang="ts"> export default { name: 'Layout' } </script> 方案二: 使用插件unplugin-vue-define-options   方案三:(推荐) 使用插件vite-plugin-vue-setup-extend 配置: //vite.config.ts import { defineConfig } from 'vite

  • vue自定义指令的使用2022-08-23 16:03:16

    1、背景:想通过自定义指令v-hasHelp控制页面右上角是否出现帮助按钮,点击按钮可以跳转外部链接。用自定义指令的目的是方便。 2、先在自己的项目中注册使用hasHelp index.js import hasHelp from './hasHelp' //导入写好的hasHelp函数 const install = function (Vue) { Vue.d

  • vue项目目录结构划分2022-08-23 15:00:54

      1.dist---编译之后的项目文件 2.src---开发目录 3.src/assets---静态资源 src/assets/less---公共less src/assets/img---图片资源 4.src/components---组件 5.src/pages---各个页面,根据路由划分的 6.src/utils---工具库 7.src/App.vue---启动页面,最外层容器组件 8.arc/main.j

  • 创建一个VUE项目2022-08-23 13:30:12

    前期准备 1、安装node,官网安装(自带npm) 2、安装npm国内镜像cnpm:npm install -g cnpm;安装后可能在项目中无法使用,执行cnpm install express -g 3、安装开源前端打包工具webpack:cnpm install webpack -g 4、安装vue-cli脚手架工具:cnpm install vue-cli -g;使用vue -V查询版本号校验是

  • vue页面跳转外部链接2022-08-23 13:02:12

    vue页面跳转外部链接 在vue页面中如果想要点击某个内容跳转对应的URL(外部),可以采用下面两种方式: 1)window.location.href = url 2) window.open(url, '跳转方式')  跳转方式:_self--在当前页打开      _blank--在新页面打开        _top:框架网页中在上部窗口中显示目标

  • 使用monorepo发布vue3组件库2022-08-23 13:01:50

    安装pnpm npm install pnpm -g 初始化package.json pnpm init 新建配置文件 .npmrc 在根目录下新建.npmrc文件,并写入如下内容 shamefully-hoist = true ::: tip 注意 如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modules,就是

  • slot插槽2022-08-23 11:33:29

    插槽,也就是槽,是组件的一块HTML模板,这块模板显示不显示,以及怎样显示由父组件来决定。 插槽分为:匿名插槽| 具名插槽| 作用域插槽 1、匿名插槽 它不用设置名称属性,可以放置在组件的任意位置;可以理解为父传入样式及内容,子负责展示 index.vue 父组件 1 2 1 2 slot2.vue   子组件

  • vue中$forceUpdate的使用2022-08-23 11:32:32

    Vue中的$forceUpdate有强制刷新的意思,但是这个针对于深层次结构数据,数据通过赋值进行了更新,但是vue监听不到。深结构数据对于普通类型的数据来说,我们不需要操心数据绑定,Vue的内部机制已经帮助我们监听更新,但是对于一个复杂对象来说,例如数组对象、对象数组等,我们对其某个元素增加属

  • better-scroll在终端触屏上滑动失效(vue)2022-08-23 11:02:55

    this.$nextTick(() => { this.scroll = new BScroll(this.$refs.scroll, { scrollX: true, click: true, disableMouse: false,//启用鼠标拖动 disableTouch: false//启用手指触摸 }) }) disableTouch: false//启用手指触摸加上这句,即使在大屏触摸屏下也不会被误判为PC端而没有

  • Vue3中插槽(slot)用法汇总2022-08-23 10:32:27

    theme: fancy Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何

  • Vue2按需引入elementUI组件2022-08-23 01:03:14

    按需引入 官方文档介绍 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先 安装 babel-plugin-component: npm install babel-plugin-component -D 然后 将 babel.config.js 增加以下内容 "plugins": [ [ "component", { "lib

  • Vue复习1.02022-08-23 00:30:08

    Vue复习1.0内容:Vue基础语法、计算属性、概念、指令 Vue复习2.0已发布,文章涉及完整代码已全部上传至GitHub:Vue复习2.0——组件化开发详解 @目录Vue复习1.0Vue的MVVMVue模板1. Vue列表显示2. 计数器3. Vue指令1. v-html2. v-once3. v-cloak4. v-bind5. v-on(缩写:@)6. v-if7. v-for7.

  • vue3 学习-初识体验-常见指令v-for和v-model2022-08-22 23:30:51

    继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环. v-for 通常是在循环dom的编写的同时遍历数据进行填充. <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="https://unpkg.com/vue@3">&l

  • Vue路由传递参数与接受参数2022-08-22 21:00:37

    路由(参数传递) 使用路径匹配的方式 修改路由配置 { path: '/xxx/xxx/:id', component: XXX } 主要是在 path 属性中增加了 :id 这样的占位符,来接受路由参数 例如 /xxx/xxx/66 ID={{$route.params.id}} 源组件 => 源组件 // 源组件 <template> <div> <!-

  • jwbasta-vue2022-08-22 18:34:36

    平台简介     jwbasta-vue是一套全部开源的快速开发java后台API平台,毫无保留给个人及企业一次性付费使用。 采用前后端分离的模式,微服务版本前端基于vue开发(无前端页面)。 后端采用Spring Boot、mybatis、Redis、Spring Cache、Maven、Redis & JApiDocs。 使用maven导入jar、编

  • 记录vue2022-08-22 18:30:25

    #查看版本 node -v #安装 Node.js 淘宝镜像加速器(cnpm)注意源地址已经改变 npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名

  • Vue3+Vite+Vant报错Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=xxxx&#2022-08-22 18:05:33

    原因 在开发过程中Vue3的依赖版本有变更,直接使用的npm install下载新的版本,会导致node_modules下存在旧版本的缓存,从而影响了本地项目的启动编译。 解决方案 删除项目的 node_modules 文件夹,如果根目录存在 package-lock.json ,最好也一并删除。 修改 package.json ,如下

  • vue记录2022-08-22 17:30:26

    #查看版本 node -v #安装 Node.js 淘宝镜像加速器(cnpm) cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名称,可以根据自己的需求起名 vue init webpack myvue #初始化运行 cd myvue cnpm instal

  • 普通插槽2022-08-22 14:30:19

    父组件 : <template> <div class="app"> <!-- 1.内容是button --> <show-message title="哈哈哈"> <button>我是按钮元素</button> </show-message> <!-- 2.内容是超链接 --> <show-messag

  • Vue 组件通信之 Bus2022-08-22 14:04:49

    bus详细描述: vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外

  • Vue中bus传值的理解2022-08-22 14:01:45

      说起bus你会想到什么?公交车?总线?在Vue中,对于任意两个组件之间的传值,就可以使用事件总线—bus。 简单描述  在任意两个组件传值中,可以创建一个bus类负责事件派发、监听和回调管理。 使用方式  在Vue项目中,我a.vue需要给b.vue传值,使用bus传值的方式如下: 1)建立bus.js文件   

  • vue.ps1 报错2022-08-22 13:02:43

    XXX_fei 这个根据自己电脑情况而定 vue : 无法加载文件 C:\Users\XXX_fei\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本,这样的问题,需要使用管理员权限打开,然后输入下面的指令:set-ExecutionPolicy RemoteSigned 出现这个,我一般不改系统配置,我这里解决办法采用非全局 v

  • vue ui 报错2022-08-22 12:33:57

    vue ui 报错 vue图形界面创建项目报:GraphQL error: Cannot return null for non-nullable field Mutation.projectCreate,解决方法 1、删除C:\Users\fei\AppData\Roaming\npm-cache 中的所有文件,每个电脑路径可能不一样,总之在/AppData\Roaming\npm-cache下面2、命令行执行npm unins

  • 在vue中循环调用接口-promise.all()2022-08-22 11:32:05

    methods: { handleAdd (arr) { this.loading = true const allApi = [] arr.forEach((item, index) => { const data = { id: item.id, name: item.name } const oneApi = api.add(data).then(res => {

  • vue 打包配置相对路径2022-08-22 11:00:32

    前言:临下班了产品找到我,要满足甲方爸爸需求「vue打包的静态资源需要相对路,绝对路径会报错」。时间紧,催的急(半小时问一次),导致我顾此失彼,配置好了这个没配好那个,所以借此反省一下自己,顺带记录一下配置问题。 配置起来也简单,无非就3个地方需要注意,vue.config.js、router、request 1.v

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有