vue
文章平均质量分 65
NolanKy
少有人走的路
展开
-
【小番茄夫斯基】Pinia状态管理
Pinia是尤雨溪强烈推荐的一款Vue状态管理工具,也被认为是下一代Vuex的替代产品。即Vuex5.x,在Vue3.0的项目中使用也是备受推崇。原创 2023-02-02 16:17:12 · 527 阅读 · 0 评论 -
vue3中的组件通信【2】《爷孙组件通信》
文章目录爷孙组件通信provide / inject响应性数据的传递与接收爷孙组件通信顾名思义,爷孙组件是比 父子组件通信 要更深层次的引用关系(也有称之为 “隔代组件”):Grandfather.vue└─Son.vue └─Grandson.vue方案因为上下级的关系的一致性,爷孙组件通信的方案也适用于 父子组件通信 ,只需要把爷孙关系换成父子关系即可。provide / injectGrandfather.vue 有一个 provide 选项来提供数据,Grandson.v原创 2022-02-25 16:03:15 · 5932 阅读 · 1 评论 -
vue3中的组件通信【1】《父子组件通信》
文章目录父子组件通信(1)props / emits①props使用props获取非 Prop 的 Attributeemits(子传父)(2)v-model / emits(3)ref / emits父子组件通信(1)props / emits①propsFather.vue<template> <Child title="用户信息" :index="1" :uid="userInfo.id" :user-name="userInfo.na原创 2022-02-25 15:46:21 · 3686 阅读 · 0 评论 -
在 Vue 3 和 Vite 安装 Tailwind CSS
安装npm install -D tailwindcss@latest postcss@latest autoprefixer@lates创建您的配置文件接下来,生成您的 tailwind.config.js 和 postcss.config.js 文件:npx tailwindcss init -p这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件:// tailwind.config.jsmodule.exports = { purge: [],原创 2022-01-12 16:12:39 · 1100 阅读 · 0 评论 -
Mock.js(生成虚假数据)使用及在vue+vite+ts中集成mock.js
文章目录介绍使用①下载②引入③Mock.js的规范Mock.mock()Mock.Random在Vue项目中使用Mock.js介绍mock.js 官网:http://mockjs.com/目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的接口也许并没有写完, 作为前端的我们也就没有办法获取数据. 所以 前端工程师就需要自己按照接口文档模拟后端人员提供的数据, 以此进行页面的开发.原创 2022-01-12 14:25:10 · 3036 阅读 · 0 评论 -
vue中的一个简单好用的标题组件
封装代码<template> <div class="title-bar">{{ title }}</div></template><script lang="ts">export default { name: 'TitleBar', props: { title: { type: String, default: '' } }}</script><sty原创 2022-01-02 16:52:27 · 1037 阅读 · 0 评论 -
页面载入进度条 nprogress的使用
介绍页面路由切换时,附带一个加载进度条会显得非常友好,不至于白屏时间过长,让用户以为页面假死。这时候我们可以用到 nprogress[108],在路由切换时开启和关闭:安装npmnpm install --save nprogresyarnyarn add nprogress使用直接调用 start()或者done()来控制进度条。可以使用inc()随机增长进度条,注意,这个方法永远不会让进度条达到100%。NProgress.inc()通过使用done()让进度条关闭。NP原创 2021-12-30 16:27:30 · 712 阅读 · 0 评论 -
vue3中使用Ant Design 并且使用 babel-plugin-import 来进行按需加载
首先,在百度到ant design官网之后,要在右上角调整版本不然会有大坑下载使用npm i --save ant-design-vue@next完整引入import { createApp } from 'vue';import Antd from 'ant-design-vue';import App from './App';import 'ant-design-vue/dist/antd.css';const app = createApp();app.config.pro原创 2021-11-18 20:49:25 · 1887 阅读 · 2 评论 -
关于npm命令的学习笔记,--save 、--save-dev 、-D、-S
1,npm install 等价于 npm i --save 等价于 -S --save-dev 等价于 -D 2,npm i --save-dev <packname> //工程构建(开发时、“打包”时)的依赖 ;//例:xxx-cli , less-loader , babel-loader...,//会将包名字加在 devDependencies 中3,npm i --save <packname> //项目(运行时、发布到生产环原创 2021-11-18 19:01:17 · 1096 阅读 · 0 评论 -
Vue组件通信方式 props/$emit
自定义事件本质是由子组件向父组件传递信息<template> <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']"> <i :class="['el-alert__icon',changeIcon]"></i> <div class="el-alert__content"> <slo原创 2021-11-07 11:33:41 · 816 阅读 · 0 评论 -
vue3中插槽的详细使用笔记
文章目录一,插槽的作用二,样例三,具名插槽一,插槽的作用类似于你往电脑的卡槽中插内存卡啊等,简单来说,就是父组件向子组件传值的时候用的,在子组件中用 <slot ></slot>先预留出一个位置,然后父组件就可以在调用子组件的时候可以在子组件标签内部向子组件添加信息,不是之前的数据传递,是模板数据的传递二,样例比如,我们现在先定义两个组件,一个父组件father,一个子组件son,父组件调用子组件<template> <h1>我是父组件&l原创 2021-11-07 10:18:23 · 1694 阅读 · 1 评论 -
vue-router 路由跳转传参的几种方式,其中有刷新页面丢失参数的写法和不丢失参数的写法
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据。我们先来看看路由跳转的几种方式:1、通过params方式传参通过$route.push的path携带参数方式(路由配置中指定参数)// 路由配置{ path: '/detail/:id', //若id后面加?代表这个参数是可选的,即使不传id也不会导致页面无法访问 name: 'detail', component: Detail } // 列表中跳转this.$router.push({ pa原创 2021-10-15 19:23:58 · 1444 阅读 · 0 评论 -
vue3使用screenfull插件实现全屏效果
npm地址:https://www.npmjs.com/package/screenfull使用方法安装npm install screenfull --save在使用.vue文件中 引入import screenfull from "screenfull"在按钮方法中调用方法可以双向切换全屏与非全屏screenfull.toggle()还可以检测全屏状态screenfull.isFullscreen测试浏览器是否支持全screenfullscreenfull.isEnabl原创 2021-09-15 21:50:58 · 812 阅读 · 0 评论 -
vue3+vite+ts+vuex+vue-router+Element-plus+tailwindcss+mock 搭建完整项目
一,介绍Vite(法语单词,“快” 的意思)是一种新型的前端构建工具最初是配合 Vue3.0 一起使用的,后来适配了各种前端项目,目前提供了 Vue、React、Preact 框架模板vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点:快速的冷启动即时的模块热更新真正的按需编译从作者在微博上的发言:Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起原创 2021-09-10 16:40:39 · 2372 阅读 · 0 评论 -
使用vite创建vue项目和使用vue-cli创建项目的区别
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。使用 npm:$ npm init @vitejs/app <project-name>$ cd <project-name>$ npm install$ npm run dev或者 yarn:$ yarn create @vitejs/app <project-name>$ cd原创 2021-07-07 21:47:52 · 8388 阅读 · 0 评论