jimson_zhu的博客

Vite+Vue项目创建。

今天总结一下Vue3新特性，并介绍使用vite创建项目的步骤。

新项目需要构建或旧项目需要重构时，一般都需要经过几个大的步骤。新项目构建1、安装node.js2、安装nvm3、管理npm版本4、配置npm镜像cnpm5、全局安装Vue6、开发工具创建项目目录7、安装vue-cli8、创建项目9、安装axios、vue-router、vuex10、目录结构划分11、封装网络请求js12、项目代码编辑13、项...

axios作为Vue官方推荐的vue-rourse替代品，其自身优点很多，经常用于网络请求。现在对其进行说明。之所以不用jquery的ajax进行请求，是因为jquery体积过大。我们首先得明确的是，在使用Vue进行项目开发过程中，如果使用的是jquery的ajax，需要引入jquery，但是jquery本身的体积就有代码1w行左右，显然为了使用ajax就另外引入这么多代码是不合理的。...

Vuex是什么？官网解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式插件。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。状态管理是什么？可以简单地将其...

ES6中一个非常重要和好用的特性就是Promise，但是初次接触Promise会一脸懵逼，What the hell is this？看看官方或者一些文章对它的介绍和用法，也是一头雾水。Promise到底是做什么的呢？Promise是异步编程的一种解决方案。那什么时候我们会碰到处理异步编程、异步事件的情况呢？一种很常见的场景应该就是网络请求了。我们封装一个网络请求的函数，因为不能...

<keep-alive>是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。可以使用生命周期函数created来验证是否被包含的组件不重新渲染（即不重新created）。<template> <keep-alive> <home></home> </keep-alive&gt...

路由导航守卫1、为什么使用导航守卫？我们来考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？网页标题是通过<title>来显示的，但是SPA只有一个固定的HTML，切换不同的页面时，标题并不会改变。但是我们可以通过JavaScript来修改<title>的内容：window.document.title = '新的标题'。那么在Vue项目中，在哪里...

params类型的方式在动态路由一篇博客里其实已经说过，这里不再赘述，下面是query的情况。以前动态路由的params类型方式其实也可以写成对象的key形式，指定path。的应用中，路由对象会被注入每个组件中，赋值为。，并且当路由切换时，路由对象会被更新。跳转对象，当前活跃的对象，里面可以获取。在使用了 vue-router。获取参数通过$route。实例，想要导航到不同。

嵌套路由嵌套路由是一个很常见的功能，比如在home页面中，我们希望通过/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。也就是在大页面home下面嵌套/home/news和/home/message这两个路由，组件切换是在home这个大页面进行。实现步骤演示：1、首先定义两个子组件，用于进行嵌套：2、然后...

路由懒加载首先，我们知道路由中通常会定义很多不同的页面；这些页面最后被打包在哪里呢? 一般情况下，是放在一个js文件（指app.3252jshdfsdjfskdf……js，下面会说）中；但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大；如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。为了避免这种情况，就可...

动态路由有时候一个path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb；除了有前面的/user之外，后面还跟上了用户的ID；这种path和component的匹配关系，我们称之为动态路由（也是路由传递数据（参数）的一种方式）。配置和使用步骤：第一步，首先创建组件，没有组件怎么跳转：第二步，在配置文件in...

之前使用router-link的to属性进行路由跳转，现在使用另一种方式进行跳转：使用代码的方式进行跳转。vue-router源码内部定义了一个对象：$router，其实就是一开始使用vue-router时创建的路由实例对象，这个对象在任意一个组件内都可以使用，所以可以调用它的push和replace方法进行路由跳转：说明：push和replace分别对应之前history模式的p...

vue-router是Vue.js官方提供的路由插件，是Vue.js一个很重要的概念，在开始vue-router的说明之前，一些概念需要先理解。一）基础概念理解1、路由路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。在生活中类似的概念就是路由器。路由器是做什么的？路由器提供了两种机制：路由和转送。路由：是决定数据...

如果我们只是简单写几个Vue的Demo程序，那么你不需要Vue CLI，而如果开发大型项目, 那么必然需要使用Vue CLI。使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无疑效率低下，所以通常我们会使用一些工具来帮助完成这些事情。Vue CLI就是这样一个工具。1）CLI是什么意思?...

webpack配置文件webpack.config.js里的配置其实可以进行分类（分离），因为有些配置是开发时需要的但是打包发布后就不需要了，而有些仅仅是打包发布时需要但是开发时不需要。比如代码的压缩（丑化）配置项，是一个项目依赖（打包发布时需要），而上节说的配置本地服务器的配置则是开发时依赖（开发时需要）。所以，对webpack.config.js配置文件的分离有时候显得很有必要。而...

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现让浏览器自动刷新显示我们修改后的结果，而不用每次npm run build之后再点击index.html进行项目运行和查看效果。不过它是一个单独的模块，在webpack中使用之前需要先安装它：npm install webpack-dev-server@2.9.1 --...

plugin是什么？plugin是插件的意思，通常是用于对某个现有的架构进行扩展。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。loader和plugin区别loader主要用于转换某些类型的模块，它是一个转换器；plugin是插件，它是对webpack本身的扩展，是一个扩展器。plugin的使用过程步骤一：通过npm安装...

在之前的博客里说到组件化开发，说过在以后的Vue开发过程中，都会采用组件化开发的思想。那么，在目前为止的项目中，如果也想采用组件化的形式进行开发，应该怎么做呢？答案是将代码进行抽离。上一个博客说到，我们组织代码是以这样的方式进行的——在Vue实例里面进行template模板的定义，然后代码最后编译时替换掉index.html文件id="app"的整个部分：但是明显这样做项目后面的开...

实例在之后的开发过程中可以管理#app中的内容。模板在之后的开发中，我并不希望手动地去频繁修改，是否可以做到呢？如果我们后面自定义了组件，也必须修改index.html。模板中的内容进行抽离，分成三部分书写：template。这样做的好处是，我们就不需要在以后的开发中再次操作。这里使用的是ES6的模板字符串语法。中的数据显示在界面中，就必须修改。到目前为止，我们开发的项目都是。模板的内容会替换掉挂载的对应。内容删掉，只保留一个基本的。的内容，应该怎么处理呢？在之前的博客中，我们知道。中写入对应的标签即可。

上一篇我们解释了webpack是什么，以及webpack、node和npm的关系。现在说明webpack的安装和配置。

当下的打包工具有很多：grunt、gulp、roolup（vue就是用它进行构建的）、webpack等等。这一篇博客主要对webpack进行说明。webpack是什么？官方解释是：At its core, webpack is a static module bundler for modern JavaScript applications. 翻译过来就是：本质上来说，webpa...

在进行其他前端知识的总结之前先对“前后端分离”和“前端模块化”做一个说明，这些概念的理解对我们前端开发很有意义。前后端分离这里先对前后端分离做一个简单的说明，后期会进行详细说明。早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。这样做有很多缺点：整个网站页面由后端人员来编写和维护，后端工作量大；如果由前端开发人...

在进行插槽的说明之前，先对一个概念进行说明：编译作用域。编译作用域官方给出的解析是：父模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。举一个例子：<div id="app"> <my-cpn v-show="isShow"></my-cpn></div><template id...

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。官方指出：1）父组件访问子组件：使用$children或$refs；2）子组件访问父组件：使用$parent。父组件访问子组件：$children1）this.$children是一个数组，它包含所有子组件对象；2）我们这里通过一个遍历，取出所有子组件的message状态。...

在上篇博客中提到，子组件是不能使用父组件或者Vue实例的数据的。但是，在开发中，往往一些数据确实需要从上层传递到下层（父组件传到子组件），比如在一个页面中，我们从服务器请求到很多数据，但是这些数据不是全部都在一个大页面展示的，而是部分数据需要子组件进行展示。这时并不会让子组件（可以是大页面的一部分）再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。这就涉及父...

组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属于自己的data数据。组件中的数据保存在哪？组件的data能不能保存在Vue实例上呢？经过测试，在组件中不能直接访问Vue实例中的data。即便能访问，如果将所有的数据都放在Vue实例中，Vue实例会变得非常臃肿。<div id="app"> <my-cpn></my-...

全局组件和局部组件前面我们使用Vue.component()的方式注册组件时，注册的组件是全局的，这意味着该组件可以在任意Vue实例下使用。如果将这个组件挂载到某一个Vue实例中，该组件就是一个局部组件了。const myComponent = Vue.extend({ template:` <div> <h2>我是标题&l...

Vue组件化开发 组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。注册组件的基本步骤：1）创建组件构造器：调用Vue.extends()创建组件构造器；2）注册组件：调用Vue.component()注册组件；3）使用组件：在Vue实例作...

9、v-model表单元素在实际开发中很常见，比如用户信息、申请信息等，都需要大量的表单。Vue中使用v-model实现表单元素和数据的双向绑定。<template> <div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2...

6、v-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。可根据这些指令后面紧跟的表达式的值，决定在页面是渲染还是销毁某些元素或组件。v-if后面可直接显式指定false或true，false时对应的元素及其子元素不会渲染。<!-- 不常用 --><div v-if="false">大于9...

Vue中定义了很多指令供我们使用，使视图按照我们的意愿进行渲染。下面逐一进行说明。1、v-once1）该指令后面不跟任何内容；2）该指令表示元素或组件只渲染一次。<div id="app"><h2 v-once>{{message}}</h2></div>new Vue({ el:"#app", d...

1、Vue是什么？Vue (读音 /vjuː/，类似于view)，不要读错。Vue是一个渐进式的框架，什么是渐进式？渐进式是指可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果希望将更多的业务逻辑使用Vue实现，那么Vue的核心库和它的生态系统：Vue-core+Vue-router+Vuex+axios，也可以满足你各种各样的需求。2、Vue的特点...