Vue3
文章平均质量分 57
tomato西红柿
每天多学一分钟
展开
-
vue-cli 运行慢,无报错
昨天创建vue3的新项目,也不报错,但是run serve的时候就特别慢!!!我计了一下时间,运行成功竟然需要三分钟,简直不能忍。然后看了一下vue-cli版本是 “@vue/cli-service”: “~4.5.15” ,果断卸了重装,4.5.0 和 5.0.3 版本都没有这个问题!(主要是有4.5.0版本的项目,运行非常快)卸载重装,如果用npm 安装的就用npm写在,yarn安装的就用yarn卸载,不记得了就都卸一遍吧! npm install -g @vue/cli npm u原创 2022-03-16 10:22:48 · 2485 阅读 · 0 评论 -
Vue3+TS+elementPlus 搭建项目(二)[配置Router&引入ElementPlus]
配置Router文件位置:router > index.ts没有的话自己创建import {createRouter,createWebHashHistory,RouteRecordRaw} from 'vue-router'// 也可以单独写成import type {RouteRecordRaw} from 'vue-router' type 表示是个类型,不是其他的函数const routes :Array<RouteRecordRaw> = [ { path:原创 2022-03-14 16:50:01 · 1958 阅读 · 0 评论 -
Vue3+TS 搭建项目(一)[项目准备&代码风格&代码格式化&eslint]
搭建项目命令创建项目 vue create vue3-ts-cms如图选上回车规定项目代码风格使用vscode编辑器的安装editorconfig for vscode 插件新建.editorconfig文件 root = true #表示当前配置在根 [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格(tab | space) indent_原创 2022-03-11 17:36:42 · 645 阅读 · 0 评论 -
Vue3 - Vuex中的命名空间module使用(三)
什么是命名空间?Vuex为了解决状态特别多造成store对象非常复杂的时候,允许将store分割成模块(module)每个模块都可以拥有自己的state、mutation、action、getter使用示例namespaced 命名空间关键字(用在模块的js文件里) namespaced : truestore 文件夹下新建modules文件夹新建home.js export default const homeModule ={ namespaced:true ,// 命名空间原创 2022-02-11 14:28:41 · 2679 阅读 · 0 评论 -
Vue3 - 利用vuex调取异步接口数据(二)
使用vuex调接口同步数据到各个组件,并且组件中能获取到异步请求是什么时候完成的。利用Promise 和 axios组件中使用<script> import {onMounted} from 'vue' import {useStore} from 'vuex' export default{ setup(){ const store = useStore() onMounted(){ const promise = store.dispatch("g.原创 2022-02-10 10:16:17 · 2559 阅读 · 0 评论 -
Vue3 - Vuex使用(一)
Vuex 适用于复杂的状态管理原创 2022-02-08 16:48:13 · 855 阅读 · 0 评论 -
Vue3 devtool 安装
Vue devtool(开发环境用) 安装vue devtool 是chrome 里面的插件,支持Vue3的版本安装6.0.0.beta15可以翻墙的话直接去扩展商店安装github 上搜索vue devtool 找到最新版本下载到本地,运行yarn , 可以看到packages文件夹里有shell-chrome,然后回到chrome浏览器加载已解压的扩展程序安装就行了...原创 2022-02-08 10:39:06 · 2056 阅读 · 0 评论 -
Cannot find module ‘vue-loader-v16/package.json‘
npm run serve后报错解决办法一:卸载后重装(亲测可用)npm uninstall vue-loader-v16cnpm i vue-loader-v16转载 2022-02-07 14:25:01 · 202 阅读 · 1 评论 -
Vue3 - [email protected]使用(二)
路由的嵌套childrenHome.vue <h2>Home</h2> <router-link to='/message'>消息 </router-link> <router-link to='/shops'>商品</router-link> <router-view /> router / index.js const routes = [ { path:"/home", name:"ho原创 2022-01-29 16:57:14 · 1337 阅读 · 0 评论 -
Vue3 - [email protected]使用(一)
每天多学一分钟 时代峻峰挑老公安装vue-router@04版本的 cnpm i vue-router@4使用1.创建与pages同级的目录router,新建index.js文件 import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router' // 导入创建的组件 import Home from '@/pages/Home.vue' import About from '@/pages/A..原创 2022-01-27 17:14:03 · 1032 阅读 · 1 评论 -
Vue3 - ComponsitionAPI(二)
customRef 自定义响应式防抖,要求100ms后再更新useDebounce.js import {customRef} from 'vue' export default function(value,delay = 300){ let timer = null return customRef((track,trigger)=>{ return { get(){ track(); return value }, set(ne原创 2022-01-24 14:34:46 · 591 阅读 · 0 评论 -
Vue3 - ComponsitionAPI(一)
温故知新,常看常记setup 函数参数一:propsprops 是父组件传递过来的属性对象1.对于props定义的类型,和vue2的规则是一样的,在props的选项中定义。2.在template中也可以正常去用参数二:contextcontext 也称之为是一个SetupContext,包含三个属性attrs:所有非props的attribute(自定义属性)slots: 父组件传递过来的插槽(render的时候用)emit: 当组件内部需要发出事件时会用到emitApp.vue原创 2022-01-20 10:55:22 · 400 阅读 · 0 评论 -
Vue3 - 组件化开发二
温故知新动态组件动态组件是使用component组件,通过特殊的attribute中的is 来实现的 <component :is='currentTab'></component>currentTab的值要求可以是通过component函数注册的组件组件对象的components对象中注册的组件动态组件传值动态组件可以传值和监听事件吗?肯定的,只是需要将属性和监听事件放到component上来使用 <component name='tomat原创 2022-01-17 10:47:43 · 427 阅读 · 0 评论 -
Vue3 - 组件化开发父子传值
查漏补缺,温故知新父子组件之间如何进行通信?父组件传递给子组件:通过props属性子组件传递给父组件:通过 $emit 触发事件使用场景父组件有些数据,需要子组件进行展示什么是Props?Props 是在组件上注册的一些自定义attribute父组件给这些attribute赋值,子组件通过attribute的名称获取到对应的值Props常见的用法:字符串数组,数组中的字符串就是attribute的名称对象类型,可以在指定attribute名称的同时,指定它需要传递的类型原创 2022-01-14 10:57:32 · 1317 阅读 · 0 评论