kakarotte007的博客

一、脚手架使用1.全局安装 create-vite-app# yarnyarn global add [email protected] # npmnpm i -g [email protected].创建项目目录# project是项目名称cva projectcreate-vite-app project3.安装依赖npm install -------------- yarn4.启动项目npm run dev二、路由/vuex 安

更新内容setup 代替之前的 data ，生命周期 methods computed watch 合并在一起，全部放在setup函数中ref 定义基本类型，使得数据具有响应式reactive 定义引用类型，通用使数据具有响应式toRefs 将对象结构解析出来toRef 将对象结构解析出来的值在具有响应式的基础上，如果未找到key，就默认给个值readonly 是将通过ref 或reactive定义好的数据进行拷贝后变为仅可读的数据，不可进行修改，即无响应provide 与 inject 跨组

路由传参的三种方法1、第一种 页面刷新数据不会丢失1、第二种3、第三种1、第一种 页面刷新数据不会丢失methods：{ gotoPage(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/homepage/${id}`, })}路由配置： { path: '/homepage/:id', name: 'homepage', com

目录statemutationsactionsgettersVUEX安装新建store文件夹路径参考初始化store下index.js中的内容在 main.js里面引入store，然后全局注入一下，这样就可以在任何一个组件里面使用this.$store了在组件中使用 state在组件中使用 mutations在组件中使用 Getter在组件中使用 actionsActions 支持同样的载荷方式和对象方式进行分发：state用法和作用类似vue实例中的data基本方式：$store.state.

场景：如果有多个功能非常相似的组件，基本功能也一样，，但是他们之间存在部分差异，如果把他们做成同一个组件，会导致props传值超级麻烦和混乱，如果写成两个组件，一旦功能变动就需要修改多个组件中的代码，变得很麻烦，这个时候你可能会想，有没有一种方式可以将公共代码提出来，不同的功能再进行拆分的写法，答案当然是有的，这里就要提到 vue 中的mixin（混入）使用方法首先再组件目录下创建Mixins文件夹，在文件夹路径下创建toggle.js，路径如下：|components |__Mixins .

目录1.在main.js文件中，vue示例上挂载$EventBus并实例化2.在组件中触发事件并抛出自定义事件3.在需要接受值的组件内挂载结束后监听自定义事件4.最后别忘了销毁1.在main.js文件中，vue示例上挂载$EventBus并实例化Vue.prototype.$EventBus = new Vue()2.在组件中触发事件并抛出自定义事件data() { return { // 数据 name: 1, msg: '' } },

vscode设置代码片段文件 => 首选项 => 用户片段新建vue.json文件Ctrl + A 复制如下json文件 替换vue.json中的所有代码{ "Vue component": { "prefix": "<>", "body": [ "<template>", " <div class='box'>", " <!-- 内容区域 -->", " &

Vue中使用Swiper首先 下载所需要的包在main.js中引入在banner区域写好html结构使用挂载完成阶段的钩子函数注：如果想要使用多个swiper，可以写多个new Swiper首先 下载所需要的包npm install swiper@3 --save-dev // 我这里使用3.0版本在main.js中引入import 'swiper/dist/css/swiper.min.css'import Swiper from 'swiper'在banner区域写好html结构&l

使用 Vue CLI 创建项目果你还没有安装 VueCLI，请执行下面的命令安装或是升级：在命令行中输入以下命令创建 Vue 项目：果你还没有安装 VueCLI，请执行下面的命令安装或是升级：npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目：vue create projectVue CLI v4.2.3? Please pick a pres·et: default (babel, eslint)> Manually sele

Vue项目中ESLint基本语法要求JS中的字符串使用单引号包裹代码结尾不能跟分号声明的变量和方法必须被调用代码的最后一行要加换行tab键用多个空格代替, 一个tab键等于2个空格声明的方法名和圆括号之间加空格为了适应ESLint语法要求, 前期的准备工作安装ESLint插件, 实时提示我们代码格式可能出现的问题安装Prettier插件, 代码保存时, 自动格式化代码需要如下配置:如果之前装过Beautify, 可以先卸载掉或者禁用掉, 以免冲突设置settings.json