vue
文章平均质量分 77
Daisy__yangyang
前端工程师
展开
-
将打包好的vue项目部署到nginx上
目录1、安装 nginx (我的虚拟机系统是 centos7)2、配置 nginx3、nginx 其他命令准备环境:购买一个虚拟服务器:https://www.ucloud.cn/site/active/lagou.html;准备好一个vue项目:我的项目资源(https://gitee.com/daisy_yangyang/fed-e-task-04-02)在虚拟机上安装 nginx1、安装 nginx (我的虚拟机系统是 centos7)(1)下载本地下...原创 2021-07-20 14:56:30 · 1803 阅读 · 3 评论 -
【2021 年前端复习之一】
前端性能优化经历的四个阶段第一阶段:库、框架的选型 第二阶段:简单的构建化(js/css 的压缩和合并) 第三阶段:js / css 模块化开发 js模块化方案:AMD、CMD、CommonJs、ES6Module; CSS模块化开发基本都是在less、sass、stylus等预处理器的import/mixin特性支持下实现的 第四阶段:组件化开发和资源管理参考文章:https://link.zhihu.com/?target=https%3A//github.com/foub...原创 2021-04-23 09:01:13 · 158 阅读 · 0 评论 -
Hash 和 History 模式
Hash和History模式的区别首先需要强调的是不管哪种模式都是客户端路由的实现方式,也就是当路径放生变化之后不会向服务器发送请求,是用js监视路径的变化的变化,然后根据不同的地址渲染不同的内容如果需要服务端内容的话,需要使用Ajax发送请求。表现形式的区别-Hash模式https://music.136.com/#/user?id=10029这种模式的地址中带有#号,#号后面就是路由地址可以使用?携带路由参数,官方文档中说这种模式很丑,路径中带...原创 2021-04-08 11:05:20 · 1359 阅读 · 0 评论 -
【Vue.js + Vuex + TypeScript 实战项目开发与项目优化】
创建项目:使用 Vue CLI 创建项目安装 Vue CLI:npm i -g @vue/cli vue create edu-boss-fedcd edu-boss-fed npm run serve加入Git版本管理创建远程仓库 将本地仓库推到线上 如果没有本地仓库: git init# 创建本地仓库 git add .# 将问件添加到暂存区 git commit -m "提交日志" #提交历史记录 git remote add or...原创 2021-03-31 13:38:27 · 465 阅读 · 0 评论 -
【vue.js 3.0】之 Vite
Vite 概念Vite 是一个面向现代浏览器的一个更轻、更快的Web 应用开发工具 它基于 ECMAScript 标准原生模块系统(ES Modules)实现Vite 项目依赖Vite @vue/compiler-sfc基础使用vite serve vite buildserveHMR 热加载Vite HMR 立即编译当前所修改的文件 Webpack HMR 会自动以这个文件为日寇重写 build 一次,所有的涉及到的依赖...原创 2021-03-23 14:12:27 · 369 阅读 · 0 评论 -
【vue.js 3.0】之响应式系统原理
介绍proxy 对象实现属性监听 多层属性嵌套,在访问属性过程中处理下一级属性 默认监听动态添加的属性 默认监听属性的删除操作 默认监听数组索引和 length 属性 可以作为单独的模块使用核心方法reactive/ref/toRefs/computed effect track triggerproxy 对象<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2021-03-23 09:40:32 · 89 阅读 · 0 评论 -
【vue.js 3.0】之 Composition API
一、新增 createApp, reactive, onMounted, onUnmounted, toRefs,用这些方法封装函数引入 import {createApp, reactive, onMounted, onUnmounted, toRefs} from './node_modules/vue/dist/vue.esm-browser.js' createApp:创建 app reactive:实现响应式 setup:Composition API的入口 生命周期钩...原创 2021-03-22 16:44:08 · 900 阅读 · 0 评论 -
大前端【Gridsome + Strapi + GraphQL】开发博客应用,并部署到服务器上【Vercel + pm2】
一、准备工作Gridsome 参考我的博客:https://blog.csdn.net/weixin_37883657/article/details/113647520 参考官网:https://www.gridsome.cn/ Strapi 参考我的博客:https://blog.csdn.net/weixin_37883657/article/details/113937540 官网:https://strapi.io/ 购买一个虚拟主机或者自己电脑安装一个虚拟主机:..原创 2021-03-19 16:49:13 · 443 阅读 · 0 评论 -
【vue.js 3.0】
vue 2.x 和 vue 3.0 的区别源码组织方式的变化 (用 typeScript) Composition API (为了解决大型项目遇到超大组件使用 options api不好拆分和冲用的问题) 性能提升(重写响应式的代码、重写虚拟 dom ,从而对渲染 update 有了大幅度的提升,服务端渲染的速度也提高了2-3倍) Vite (此开发工具可以测试时不用打包,可以直接运行测试项目,提升开发效率)源码组织方式源码采用 TypeScript 重写 使用 Monorep...原创 2021-03-19 14:25:06 · 168 阅读 · 0 评论 -
vue【封装 Vue.js 组件库】
一、组件库有哪些element-iu iview CDD (Component-Driven Development) 自下而上 从组件级别开始,到页面级别结束 CDD 的好处 组件在最大程度被重用 并行开发 可视化测试 二、组件库开发流程1、处理组件的边界情况$root 小型应用中可以在 vue 根实例里存储共享数据,组件中可以通过 $root 访问根实例 $parent / $children $parent $childre...原创 2021-03-18 14:12:42 · 239 阅读 · 0 评论 -
前端面试锦集【一】
1、项目运行没有报错,但浏览器报错:xxx 500, 这种问题该如何准确找到错误的代码HTTP 响应码 500 错误。HTTP 响应码 500 错误和你的代码没有关系,它是服务端错误:你发送了请求服务端接口,服务端返回了 500 错误。HTTP 协议中规定 5xx 的状态码都是服务端相关错误。当遇到这类状态码的时候,正确的做法是:(1)找到报错的接口(2)将详细的接口请求信息反馈给后端开发人员请求地址 请求方法 请求参数 响应参数(3)协助后端联调2、对 Vu..原创 2021-03-11 13:25:13 · 115 阅读 · 0 评论 -
Gridsome案例部署【把本地服务连通远程Strapi】
一、修改 blog 项目的配置二、配置环境变量新建 .env.development (开发)和 .env.production (生产) 这两个文件,配置的内容一样 npm run develop 图片没出来原因,是把地址写死了解决办法,配置公共变量 重启服务 参考官网:https://strapi.io/documentation/developer-docs/latest/concepts/configurations.html#environments...原创 2021-02-25 13:24:32 · 176 阅读 · 0 评论 -
【Gridsome】静态网站生成
Gridsome介绍Gridsome是一个免费、开源、基于 Vue.js技术栈的静态网站生成器 什么是静态网站生成器 静态网站的好处 常见的静态网站生成器 JAMStack 静态应用的使用场景 不适合管理系统 简单页面展示 想要有更好的SEO 想要有更好的渲染性能 Gridsome是由Vue.js驱动的Jamstack框架,用于构建默认情况下快速生成的静态生成的网站和应用。 ...原创 2021-02-18 11:15:32 · 222 阅读 · 0 评论 -
【linux + Nuxt】手动部署项目(上传本地文件到服务器)
准备工作服务器安装的插件 sudo apt install npm //安装 npm apt-get install unzip //安装 unzip sudo apt-get instsll nodejs //安装 nodejs npm install -g cnpm --registry=https://registry.npm.taobao.org //安装 cnpm npm install -g -pm2 //安装 pm2 操作步骤在服务端创建 空文件...原创 2021-01-28 15:19:11 · 362 阅读 · 0 评论 -
大前端【Nuxt 发布部署-打包】
打包 Nuxt.js 应用最简单的部署方式配置 Host + Port 压缩发布包 把发布包传到服务器解压安装依赖启动服务使用PM2启动Node服务自动化部署介绍自动化提交部署代码修改后...原创 2021-01-20 16:53:19 · 462 阅读 · 0 评论 -
【大前端】NuxtJS基础教程
Nuxt 介绍一个机遇 Vue.js 生态的第三方开元服务端渲染应用框架 它可以帮我们轻松的使用 Vue.js 技术栈构建同构应用 官网:https://zh.nuxtjs.org/ GitHub 仓库:https://github.com/nuxt.nuxt.js初始化NuxtJS项目Nuxt.js 的使用方式初始项目 官方文档:https://zh.nuxtjs.org/gguide/installation 方式一:使用 create-nuxt-app 方...原创 2021-01-14 16:13:23 · 609 阅读 · 2 评论 -
【大前端】Vuex 数据流管理及Vue.js 服务端渲染(SSR)
概述SPA 单页面应用优点 用户体验好 开发效率高 渲染性能好 可维护性好 缺点 首屏渲染时间长 不利于 SEO 什么是渲染渲染:把【数据】+ 【模板】拼接到一起传统的服务端渲染代码展示 <!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compat...原创 2021-01-13 10:20:12 · 227 阅读 · 0 评论 -
【大前端】Vuex 数据流管理及Vue.js服务端渲染(SSR)
Vue 组件间通信方式回顾状态管理state,驱动应用的数据源 view,以声明方式将 state 映射导视图 actions,响应在 view 上的用户输入导致的状态变化三种组件间通信方式父组件给子组件传值 子组件中通过 props 接收数据 父组件中给子组件通过相应属性传值 子组件给父组件传值 通过在子组件 $emit 触发事件携带参数,父组件通过注册子组件内部触发的事件,并通过 $event 接收传递的数据,完成子向父的传值 不相关组件之间传值...原创 2021-01-11 17:17:48 · 155 阅读 · 0 评论 -
【大前端1-拉钩教育作业】关于 vue 源码的简答题
##简答题#####1、请简述Vue首次渲染的过程-在首次渲染之前,首先进行Vue初始化,初始化实例成员和静态成员 -当初始化结束之后,要调用Vue的构造函数newVue(),在构造函数中调用了_init()方法,这个方法相当于我们整个Vue的入口 -在_init方法中,最终调用了$mount,一共有两个$mount,第一个定义在entry-runtime-with-compiler.js文件中,也就是我们的入口文件$mount,这个$mount...原创 2021-01-05 20:17:04 · 286 阅读 · 0 评论 -
Virtual DOM 的实现原理
什么是虚拟DOMVirtual DOM(虚拟DOM),是由普通的 JS 对象来描述 DOM对象。为什么使用虚拟DOM虚拟 DOM 的作用维护视图和状态的关系 复杂视图情况下提升渲染性能 除了渲染 DOM 以外,还可以实现 SSR(Nuxt.js/Next.js) 、原生应用(Weex/React Native)、小程序(mpvue/uni-app)Virtual DOM 库Snabbdom Vue 2.x 内部使用的 Virtual DOM 就是改造...原创 2020-12-25 15:13:40 · 119 阅读 · 0 评论 -
Vue 响应式原理【2】
模拟Vue响应式原理-分析功能 负责接收初始化的参数(选项) 负责把 data 中的属性注入到 Vue 实例,转换成 getter(setter) 负责调用observer 监听 data 中所有属性的变化 负调用 compiler 解析指令/ 插值表达式 结构<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <met...原创 2020-12-23 17:02:04 · 83 阅读 · 0 评论 -
Vue-Router 原理实现
Hash 模式和 History 模式的区别表现形式的区别Hash 模式 :https://music.163.com/#/paylist?id=3102961863 History 模式:https://music.163.com/platlist/310293102961863原理的区别Hash 模式是基于锚点,以及 onhaschange 事件 History 模式是基于 HTML5 中的History API history.pushState() ...原创 2020-12-21 14:47:22 · 144 阅读 · 0 评论 -
Vue 响应式原理【1】
数据驱动数据响应式、双向绑定、数据驱动数据响应式 数据模型基金是普通的 JavaScript 对象,而当我们修改数据时,视图会进行更新,避免了繁琐的 DOM操作,提高开发效率。 双向绑定 数据改变,视图改变;视图改变,数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动是 Vue 独特的特性之一 开发过程中仅需要关注数据本身,不需要关心数据是如何轩然大波视图数据响应式核心原理-Vue2Vue 2.xvue 2.x深入响...原创 2020-12-22 15:44:43 · 108 阅读 · 0 评论