因为需要兼容其他vue2.0的项目,所以先卸载vue-cli,再全局安装桥接工具 卸载vue-cli2.0 npm uninstall vue-cli -g 安装vue-cli3.0 npm install -g @vue/cli 安装桥接工具 npm install -g @vue/cli-init 然后开始创建项目 vue create project 启动项目 yarn serve 这样通过复制下方
script setup是vue3中新引入的语法糖，目的是简化使用Composition API时冗长的模板代码。 例如： <script lang="ts"> import { defineComponent, ref } from 'vue' import { MyButton } from '@/components' export default defineComponent({ components: {
使用hash模式时， 需要引入使用 createWebHistory 使用history模式时， 需要引入使用 createWebHashHistory
<template> <div class="shop_cart"> <div class="add"> <div class="ul"> <div> <button @click="addShopCart($event)">添加到购物车</button> </div> <div>
第1章 课程简介 课程简介 1-1 课程导学 (14:16) 1-2 课程实用指南 1-3 课前必读（源码获取方式） (02:16) 第2章 项目初始化和推荐页面开发 本章从项目的初始化开始，介绍了项目是如何初始化的，然后带你编写页面的基础骨架，初始化基础路由。随后教你如何注册后端接口路由来获取数据，
1、props是指父组件通过属性的形式将值传给子组件 <user-save :userid="data.ActiveUserId" v-if="data.dialogVisible" @closeDialog="closeDialog" /> 比如这个，他的userid就是一个父组件与子组件相通的接口，在子组件中,使用这种方法取值 props
第一步：如果你之前用的是vue2.0，那么需要删除（没有则跳过第一步） npm uni -g vue-cli 第二步：安装vue3.0 npm i -g @vue/cli 第三步：创建项目 vue create projectname（项目名称） 在创建项目时有三个选项供你选择，我选择的是中间的vue3.0， 在这一步中我出现了问题， 我在安装的时
之前我们做的vue项目都是用的2.0的脚手架，但3.0的脚手架出来后，让我们使用起来确实很不顺利，比如在3.0的脚手架中加入了装饰器，还是用了typescript语法，对于像不喜欢typescript语法的人来说，这种感觉确实是很难受。但是对你来说，同样是个挑战，如果你喜欢typescript的语言
一.应用场景 1.列表页进入详情页，再从详情页返回列表页；列表页缓存不刷新。保持原来选中的查询参数以及当前页 2.某个新增页面分为两步，分为A页面和B页面；当第一步A页面信息填好后，点击下一步到第二步B页面。再返回到第一步A页面，A页面信息不丢失。同理第二步填好信息返回到第一步，再回到
setup函数： 在该函数声明的变量以及值需要return，其他模块才能只用，否则只能在该函数内使用。 声明变量： vue3.0声明变量提供了两种方式，一个是ref(响应式),一个是reactive(非响应式)， 以ref声明的变量都有一个value属性， 我们在setup函数改变量.value属性来进行赋值才能达到
<template> <PageWrapper title="引导页" content="用于给用户的指引操作"> <a-button type="primary" @click="handleStart">开始</a-button> </PageWrapper> </template> <script lang="ts&q
输入vue create hello-world 命令新建项目，然后使用向下箭头去选中Manually select features配置项，此时效果是按照默认的配置default（babel,eslint）走，直接进入了下一项配置（个人感觉点击向下箭头和点击回车键没啥区别呀） 解决方法： 按照官网提示，使用 winpty vue.cmd create hello-world
createWebHistory路由模式路径不带#号(生产环境下不能直接访问项目，需要nginx转发) http://localhost:8080/#/ const router = createRouter({ history: createWebHistory(), routes}); createWebHashHistory路由模式路径带#号 http://localhost:8080/ const router = creat
echarts在开发环境中，组件切换二次渲染的时候是可以正常显示的。打包放入nginx中，二次渲染不出来。 解决办法就是我们在重新创建的时候，移除之前创建的实例并且重新创建一个Echarts实例： document.getElementById('rightEcharts').removeAttribute('_echarts_instance_');
1、打印有数据，但是获取不到参数： 取值设置： roleName.value = (roleList.value as any)?.roleName; 即可
VUE3.0,DAY65 全局前置路由守卫全局后置路由守卫小结独享路由守卫小结内置路由守卫 全局前置路由守卫 保护路由的安全。比如当我们使用下图的案例，只有特定的人员才可以访问其中的Message显示的信息。 我们首先使用网页的本地会话存储中输入进去一个name，值为my。实现只有
首先安装vite npm init @vitejs/app yarn create @vitejs/app 使用预设模板创建框架 yarn create @vitejs/app my-vue-app --template vue 支持的模板预设包括： vanilla vue vue-ts react react-ts preact preact-ts lit-element lit-element-ts 使用scss npm i --save-d sa
VUE3.0,DAY62 路由简介vue-router的相关理解路由的理解案例展示注意点小结嵌套（多级）路由 路由简介 生活中的路由器可以看作如下所示。 那么路由的概念就是如下：就是一个对应关系，路由(route），多个路由通过一个路由器（router）进行管理。 路由的应用在vue中叫SPA（single page web
VScode》文件》首选项》用户片段》vue.json(Vue) vue.json配置： { "Print to console":{ "prefix": "vuec", "body": [ "<template>", " <div>", " </div>", "&l
折磨了我一整个下午，有必要记一下起因： 本来想用antd这个UI组件库，然后就install，结果，vue编译通过了，然后在浏览器里面打开，全是空白的，啥也没有。 原来看的是antd对于vue2.0的文档，我靠，这么重要的信息给塞到页面下面。 然后跑去看对vue3.0支持的文档，发现要执行下面这个命令： npm i --save
Vue3已经发布一段时间了，版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一，新版本由于算是重新构建生态系统，相关资源的缺乏。与Vue2丰富的UI框架相比，Vue3就显得有点少，也算是影响开发人员使用Vue3的原因之一。 在Vue中使用UI框架是一个很好的组合，因为它使开发
效果图 本次开发的版本 代码片段 按需引入 import { use } from "echarts" import { GlobeComponent } from "echarts-gl/components"; use([ GlobeComponent ]); 地图组件 globe: { baseTexture: require("@/assets/datav-gl-texture.jpg"),
vue2.x版本中我们获取dom节点就是直接在html上面定义ref然后this.$refs.ref就可以了。 但是vue3.0中已经没有this了，而且变量命名方式也改为了ref()，这样我们如何获取dom节点呢？ 首先还是同vue2版本一样，在html上面定义ref： <div ref="divRef"></div> 然后在ts文件中定义： const
目的： 当图片进入可视区域内去加载图片，且处理加载失败（默认图片），封装成指令。 1.了解IntersectionObserver（） 参考链接：IntersectionObserver // 创建观察对象实例 // const observer = new IntersectionObserver(callback[, options]) const observer = new IntersectionObserver
我也是看过别人的文章来写的， 有别人写的好的，我为啥自己还在写一遍，自己写过一遍才记的更清楚 diff算法的改变 在这先解释一下什么是Diff算法； diff算法是通过循环递归对节点进行比较，比较出节点状态和需要的操作，最后使用vnode进行DOM渲染， 在次过程中会有俩个DOM树，一个第一次
