初识VUE和相关启动环境搭建

原创 已于 2024-05-17 15:59:06 修改 · 474 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2021-12-10 17:32:29 首次发布
本文详细介绍了Vue.js的生命周期，包括安装Vue Router、本地跨域配置、主要组件间的关系。同时，提供了Mac上安装Homebrew、npm、Vue的步骤，并讲解了如何修改浏览器标题和图标。对于前端开发者来说，这些内容有助于理解Vue应用的工作流程和开发环境搭建。

1、VUE的生命周期
https://www.jianshu.com/p/672e967e201c

安装router
https://blog.youkuaiyun.com/qq_23135259/article/details/128821555

本地跨域测试：
https://blog.youkuaiyun.com/C_1_3_5/article/details/126218670
https://blog.youkuaiyun.com/qq_33638188/article/details/125343763
注意：在config中的index.js文件中只能有一个proxyTable项，否则跨域不成功
2、index.html、main.js、App.vue、index.js之间的关系
https://www.jianshu.com/p/f7566cfbc2da

3、Mac安装Homebrew国内如何自动安装
https://zhuanlan.zhihu.com/p/111014448

4、Mac安装npm
https://www.python100.com/html/4T6HZH90CX48.html

5、Mac安装VUE
https://www.yzktw.com.cn/post/1245121.html

6、更改浏览器标题和图标
https://www.cnblogs.com/yeyuqian/p/17031842.html

vue 学科年级学段多级联动需求 跨组件如何监听 如何解决vue-communicatio监听多个参数的问题 以及vue-communicatio的注意事项
c327127960的博客
04-04 1425
vue 学科年级学段多级联动需求 跨组件如何监听 如何解决vue-communicatio监听多个参数的问题 以及vue-communicatio的注意事项
1.Vue2使用ElementUI-初识及环境搭建
qq_22321199的专栏
06-07 1283
vue2.x-初识及环境搭建
vue父子组件状态同步的最佳方式续章(v-model篇)
GD6570的专栏
09-15 360
大家好！我是木瓜太香！一名前端工程师，之前写过一篇《vue父子组件状态同步的最佳方式》，这篇文章描述了大多数情况下的父子组件同步的最佳方式，也是被开源中国官方推荐了，在这里表示感谢！ 这次作为续章是对上一篇文章的特殊情况的补充，并会给出较详细的描述与代码演示，当然如果你单看这篇文章来解决特定问题也是可行的。 对于父子组件状态同步，这篇文章 《vue父子组件状态同步的最佳方式》 讲述了大多数情况下的最优解，但是当我们希望自己创建的可复用组件和封装的逻辑能够尽量行为一致的时候情况可能会有所不同，举个例子，.
vue-communication:一个可观测的vue组件通信方案，弥补vuex的不足，适合个别组件直接通信
05-30
vue-communication介绍 他是一个可观测可调试的vue组件通信方案 任意关系组件可直接通信 支持跨组件监听数据变化 支持发送离线数据 兼容 IE 由于该组件未生成dist，所以如果你的浏览器有兼容IE的需求，请在 vue.config.js 中添加如下配置：transpileDependencies:["vue-communication"] 安装 yarn add vue-communication // 或者 npm install vue-communication -D 引入 import { $sender, $receiver } "vue-communication"; Vue.prototype.$sender = $sender; Vue.prototype.$receiver = $receiver; 视频教程 用法 基本概念： 该组件暴露两个主要 API
关于Vue的各种通信方式
tortoise666的博客
06-12 1822
vue通信应该是一个老生常谈的问题，面试也经常会有相关的问题，我之前作答往往是prop父传子，emit子传父，vuex复杂组件之间通信，bus全局通信如果不采用vue的通信方式我们还可以使用web存储（不推荐），自我感觉已经算很完美的回答了呀，现在想想可真的太无知了，今天详细介绍一下vue各种通信方式 1.prop、emit、bus、vuex 上面几种通信都是最基础的建议异步vue官网查阅 2.p...
【前端进阶良品】Vue 组件间通信方式完整版
前端发动机
03-24 292
注：文中有许多链接，可以点击原文，获得更好的阅读体验前言Vue.js 在现今使用有多广泛不用多说，而 Vue 的一大特点就是组件化。本期要讲的，便是 Vue 组件间通信方...
初识Vue3(详细版:创建，启动vue 项目）
等什么君！的博客
09-27 4092
本篇博客，是基于已经学习完JavaScriptHTML和CSS知识之后的内容如果大家对这些还不是很熟悉，可以点击链接来检验你的知识水平，来发现自己的不足总而言之：Vue3 是一款用于构建用户界面的JavaScript 框架。说到“框架”大家是不是很熟悉，在我们学习后端 过程中，我们常常称 spring 框架spring 和Vue3 区别1 作用的方向不同: spring 是基于后端的，做后端项目；Vue3 是基于前端的，做前端项目2 构建工具不同：spring 是maven构建；
Vue 环境搭建和 Hello world
Errol's Blog
03-22 2584
vue环境搭建和 hello world
【Vue教程01】Vue 简介与环境搭建
silverclayz的技术分享
06-19 1103
Vue 第一节课主要介绍了 Vue 框架的基本概念和核心特性。Vue 是一款渐进式 JavaScript 框架，用于构建用户界面，支持响应式数据绑定、组件化开发、指令系统等。课程重点讲解了如何创建 Vue 实例，包括 el（挂载点）、data（数据对象）、methods（方法）、computed（计算属性）和 watch（监听器）的使用方式。同时了解了 Vue 的生命周期钩子和双向数据绑定原理，为后续深入学习打下基础。
【Vue.js基础】1、初识Vue.js：安装与基本用法
weixin_52938153的博客
05-27 718
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
【猿说VUE】初识VUE，带你打开VUE之门
热门推荐
黑白猿的琐碎日常
02-29 2万+
自从近几年前后端分离模式开始后，作为从事后端开发的我，为了跟上时代的步伐，或者能够跟现在的年轻人交流，开始了自学VUE的学习之旅。再次记录学习中的点点滴滴，争取把学习过程中的九九八十一难都记录下来，作为自己学习的一个见证，也是对自己的一个督促。
【Vue.js基础】10、Vue CLI：项目脚手架与开发环境
weixin_52938153的博客
05-28 957
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
初识 Vite：快速搭建现代化的 Vue 项目
它通过利用ES模块（ES Module）的特性，能够在浏览器中快速构建，并且实现了按需编译，使得开发者可以更加高效地进行开发和调试。 Vite主要基于Rollup进行构建，同时借助浏览器原生的ES Module特性，不再需要像传统...
vue 最全组件通信方法
weixin_40151813的博客
08-19 233
组件通信常⽤⽅式：props、event、vuex 边界情况：parent、parent、parent、children、root、root、root、refs、provide/inject ⾮prop特性：attrs、attrs、attrs、listeners props $emit / $on //vue中$emit与$on var Event = new Vue();//相当于又new了一个vue实例，Event中含有vue的全部方法； Event.$emit('msg',this.msg);.
Vue移动应用案例
2509_93942886的博客
11-24 230
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
父组件向子组件传递对象类型参数时，在子组件中修改对象的方法
SSHLY3的博客
11-20 324
Vue组件间对象参数传递规范 摘要：Vue中父组件向子组件传递对象参数时，禁止直接修改子组件Props（违反单向数据流）。推荐两种解决方案： 需同步父组件时：子组件通过defineEmits触发自定义事件，父组件监听事件并主动修改源数据； 仅子组件使用时：通过深拷贝创建对象副本进行本地修改。 对于表单场景，可使用v-model语法糖简化双向绑定。注意：嵌套对象修改需保持引用完整，深拷贝推荐JSON.parse(JSON.stringify)或lodash.clonedeep。始终遵循"子通知、父修
Vue发布
2509_93943467的博客
11-24 129
以前在列表渲染成千上万条数据时，页面总会明显卡顿，但现在用新的函数处理数据，连滚动都流畅了许多。我测试了一个简单的待办应用，用Vue 3的函数配合和，代码量减少了30%，而内存占用却降低了。更惊喜的是，Tree-shaking支持现在更智能了，打包时只引入用到的功能，最终bundle大小能缩小40%以上。社区里已经涌现出许多基于Vue 3的UI库，比如PrimeVue和Quasar，它们都利用了新API的优势，组件更轻量、可定制性更强。举个例子，我以前处理用户认证时，得在多个组件里重复写登录状态的逻辑。
Vue3的生命周期
分享学习网络的点点滴滴
11-21 109
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
Vue视频处理案例一、核心思路与基础布局
最新发布
2509_93942763的博客
11-24 123
从视频的加载、播放控制，到进度条的交互、canvas的实时绘制，每个环节都可能遇到各种兼容性和性能问题。最终实现的效果是用户可以流畅地拖动进度条选择封面，选中的封面可以通过canvas的toDataURL方法转换成base64字符串，然后提交到后端保存。另外，为了更好的用户体验，可以在视频加载期间显示一个loading状态，在视频出错时给出友好提示。我们需要在用户拖动进度条时，实时地将当前时间点的视频帧绘制到canvas上。在实际测试中发现，如果每次鼠标移动都立即绘制画面，在低配电脑上会导致明显的卡顿。
Angular环境搭建与初识：从零到Hello World
本文主要介绍了Angular这一流行的JavaScript前端框架的环境搭建过程和基本体验，适合初学者入门。Angular是由谷歌开发的开源框架，起源于2009年，以其强大的功能和在中大型企业级项目中的适用性而备受青睐。 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值