大前端
关注
分享
扫一扫
cloveryuan
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
3-5-Vite实现原理
一、Vite介绍1. Vite概念：Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具它基于ECMAScript标准原生模块系统（ES Modules）实现2. Vite项目依赖：Vite@vue/compiler-sfc3. 基础使用：vite serve / vite build在运行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器，注意这里.原创 2020-10-12 15:02:20 · 1175 阅读 · 0 评论 -
3-5-Vue.js 3.0响应式系统原理
一、介绍1. Vue.js响应式回顾Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用2. 核心函数eactive/ref/toRefs/computedeffecttracktrigger二、Proxy对象回顾1. 在严格模式下，Proxy的函数得返回布尔类型的值，否则会报TypeErrorUncaught TypeError: ‘set’ on.原创 2020-10-12 15:01:55 · 1688 阅读 · 0 评论 -
3-5-Vue3.0 Compositon API +todo demo
Compositon API一、Composition API使用1. 使用Vue3.0先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install vue@3.0.0-rc.1安装vue3.0创建index.html，vue3.0的使用<body> <div id="app"> x: {{ position.x }} <br> y: {{ position.y }} <br> </div.原创 2020-10-12 15:00:54 · 300 阅读 · 0 评论 -
3-5-Vue.js 3.0 介绍
一、Vue.js 源码组织方式1. 源码采用TypeScript重写提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。2. 使用Monorepo管理项目结构使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。packages 目录结构pageages 目录下都是独立发行的包，可以独立使用，以compiler 开头的包，它们都是和编译相关的代码compiler-core和平台无关的原创 2020-10-09 14:35:08 · 1120 阅读 · 0 评论 -
3-4-封装Vue.js组件库
封装Vue.js组件库一、组件库介绍1. 开源组件库Element-UIIView2. 组件开发方式CDD自下而上从组件级别开始，到页面级别结束3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况vue中处理组件边界情况的API1. $root01-root.vue<template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据 组件中可以通过 $原创 2020-09-29 15:14:15 · 372 阅读 · 0 评论 -
3-4-Gridsome 生成静态站点的基础
1. Gridsome是什么一个免费、开源、基于VUE.js技术栈的静态网站生成器官方网址：https://gridsome.orgGitHub: https://github.com/gridsome/gridsome2. 什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫做预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态资源的WebServer或者CDN上即可运行3. 静态网站的好处省钱：不需要原创 2020-09-27 10:24:14 · 1966 阅读 · 0 评论 -
3-3-nuxt.js实现 realworld-nuxtjs项目，同时学习部署在自己服务器上
=》测试 -bui9biNuxtJS代码仓库地址：https://gitee.com/cloveryuan/realworld-nuxtjs一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/Github仓库：https://github.com/nuxt/nuxt.js二、Nuxt.js的使用方式初始化项目已有的Node.js服务端项目直接把N原创 2020-09-21 11:11:18 · 1967 阅读 · 1 评论 -
plop学习
一.项目根目录下yarn add plop --dev二.要在根目录新建plopfile.js（plop入口文件需要导出一个函数，此函数接受一个plop对象，用于创建生成器任务）module.exports = plop => { plop.setGenerator('component', {//这里定义生成器的名字component description: 'application component', prompts: [ { type.原创 2020-09-21 10:55:49 · 270 阅读 · 0 评论 -
yeoman学习
一.安装yarn global add yoyarn global add generator-node二.创建自己的Generator1.mkdir generator-clover-vue2.cd generator-clover-vue3.yarn init / npm init4.yarn add yeoman-generatorgenerator-clover-vue目录下创建generators/app/index.js// 此文件作为 Generator 的核心入口/.原创 2020-09-21 10:54:58 · 181 阅读 · 0 评论 -
自动化构建Gulp
ctrl+e ctrl+1browser-sync . --file **/*.jshttps://unpkg.com/https://www.cnblogs.com/xqbiii/p/8406978.htmlyarn init --yesyarn add gulp --dev一.基本使用exports.foo = (done) => { console.log('任务foo') done() // 标识任务执行完成}//yarn gulp foo// defau原创 2020-09-21 10:53:41 · 200 阅读 · 0 评论 -
3-3-现代化的服务端渲染（同构渲染）
一.传统的服务端渲染（SSR）1.案例npm i express art-templateindex.js//客户端服务文件const express = require('express')const fs = require('fs')const template = require('art-template')//服务端模板引擎const app = express()app.get('/',(req,res)=>{ // 1.获取页面模板 const原创 2020-09-21 10:51:58 · 324 阅读 · 0 评论 -
3-2-Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化
■ 1.请简述 Vue 首次渲染的过程。首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。在_init()中调用this.$mount()，共有两个this.$mount()。①第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是帮我们把模板编译成render函数，但它首先会判断一下原创 2020-09-21 10:50:52 · 320 阅读 · 0 评论 -
3-4-搭建自己的vue-ssr
搭建自己的SSR、静态站点生成（SSG）及封装 Vue.js 组件库搭建自己的SSR一、渲染一个Vue实例mkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderderserver.jsconst Vue = require('vue')const renderer = require('vue-server-renderer').createRenderer()const app = new Vue(原创 2020-10-09 14:55:11 · 575 阅读 · 0 评论