《Vue 实战：小型项目练手与感悟》
一、Vue 基础与准备
在开始 Vue 项目之前，对 JavaScript、CSS、HTML 基础知识的掌握至关重要。
一、JavaScript 基础知识要求
- 数组常用方法
-
- filter ()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
-
- map ()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
-
- forEach ()：用于调用数组的每个元素，并将元素传递给回调函数。
-
- find ()：返回通过测试（函数内判断）的数组的第一个元素的值。
-
- findIndex ()：返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
-
- some ()：用于检测数组中的元素是否满足指定条件（函数提供）。
-
- every ()：用于检测数组所有元素是否都符合指定条件（通过函数提供）。
- 新标签用法等方面的掌握，在 Vue 项目中也非常重要。例如 Vue2 的过滤器定义及使用，如 findTypeLabel 方法中使用 types.find 查找数组元素；map 方法取数组对象中的某一字段组成新数组；join 方法将数组转化为字符串并用特定符号隔开；filter 方法对数组进行过滤等。
二、CSS 基础知识要求
- 定位布局
-
- 定位布局是 Vue 项目中常用的布局方式之一。其中，绝对定位是以父元素为基准点进行定位，使用绝对定位时，必须给父元素加定位属性，一般建议使用 position:relative，给子元素加绝对定位 position:absolute 并加上方向属性（top、left、right、bottom）。
-
- 标准流是指在不借助任何特殊的 CSS 排列规则元素下的排布规则。标准流中的块级元素独占一行，可设宽高，不设宽度时默认宽度为其父级的 100%；行内元素从左到右排列，不可设置宽高，由其内容决定。浮动和定位会脱离标准流。
-
- 浮动布局会对自身、父元素、兄弟元素和子元素产生影响。例如，浮动会使元素变成块元素，可以设置四个方向的 margin；如果父元素没有设置浮动且没有设置高度或高度小于子元素，会造成父元素高度坍塌；设置了浮动的元素会覆盖没有设置浮动的兄弟元素；子元素浮动时会有自适应的效果。清除浮动的方法有 clear:both、overflow:hidden、::after 伪元素等。
- Vue 中的 CSS 基础知识还包括类绑定、样式绑定、条件渲染、列表渲染、动态过渡效果、CSS 预处理器支持、CSS 作用域、CSS 模块化、CSS 动画和 CSS 预加载等方面。
三、HTML 基础知识要求
HTML 用于定义网页的结构，在 Vue 项目中，熟悉 HTML 的基本结构和常用标签是基础。例如单标签如 br（换行）、hr（水平线）、img（图片）等；双标签如 h1（标题）、div（容器）、p（段落）、a（链接）等；列表标签如 ul（无序列表）、ol（有序列表）、li（列表项目）；表格标签如 table、tr（表格行）、th（表头）、td（表格单元格）等。表单标签如 form（表单区域）、label（文字标注标签）、input（输入标签，有多种属性如单行文本输入框、密码输入框、单选框、复选框等）、textarea（多行文本输入框）、select（下拉列表）等。
这些基础对前端开发的重要性不言而喻，它们为 Vue 项目的开发提供了坚实的基础，使得开发者能够更好地构建用户界面，实现各种功能。
二、Vue 框架实战技巧
1. 生命周期与指令
- Vue 生命周期的应用简述：
-
- Vue 的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。在 created 阶段，实例已经完成了数据观测（data observer），属性和方法的运算，这个阶段可以进行一些异步请求的初始化操作，比如发起 HTTP 请求获取数据。在 mounted 阶段，实例已经完成了虚拟 DOM 的挂载，可以在这个阶段操作 DOM 元素，比如获取 DOM 节点并进行一些操作。在 beforeUpdate 和 updated 阶段，数据更新前后可以进行一些 DOM 操作或者数据处理，但要注意在 updated 阶段不要修改数据，以免陷入死循环。在 beforeDestroy 和 destroyed 阶段，可以进行一些清理操作，比如清除计时器、解绑事件等。
- 常用指令及动态指令简述：
-
- Vue 常用指令有 v-bind、v-if、v-for、v-model、v-on 等。v-bind 用于绑定元素的属性，可以动态地设置元素的属性值。v-if 用于条件渲染，根据表达式的值决定是否渲染元素。v-for 用于循环遍历数组或对象，生成多个元素。v-model 用于实现双向数据绑定，将表单元素的值与数据模型进行同步。动态指令是指可以根据表达式的值动态地改变指令的行为。例如，可以根据条件动态地绑定不同的类名或属性值。
- 修饰符的作用简述：
-
- Vue 事件修饰符可以帮助我们更有效地处理事件，同时提高代码的可读性和可维护性。常见的事件修饰符有 .stop、.prevent、.capture、.self、.once 和 .passive。.stop 阻止事件冒泡，相当于 event.stopPropagation()。.prevent 取消预设行为，相当于 event.preventDefault()。.capture 启用事件捕获模式，从外到内进行事件捕获。.self 只有当前元素才能触发事件，即子元素无法触发。.once 事件只触发一次。.passive 与 .prevent 的作用相反，即不阻止默认行为，并且可以提升移动端的性能。
2. 组件设计与通信
- 按需加载组件的方式简述：
-
- Vue 中实现按需加载组件有以下几种方法：
-
-
- 第一种是使用 vue 官方提供的方式，通过一个组件会打包成一个 js 文件，使用 resolve 和 require 来实现异步加载。例如：const orderList = resolve => require(['../components/orderList.vue'], resolve)。
-
-
-
- 第二种是使用 ES 提案的 import()，可以指定 webpackChunkName 来将多个组件合并打包成一个文件。例如：const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */'../components/home')。
-
-
-
- 第三种是使用 webpack 提供的 require.ensure()，可以实现按需加载，并且可以将多个相同类的组件打包成一个文件，只要给他们指定相同的 chunkName 即可。例如：const Demo = r => require.ensure([], () => r(require('../components/PromiseDemo')), 'pack')。
-
-
-
- 第四种是对于大型系统项目，可以根据环境变量来配置是否进行懒加载。在开发环境下不进行懒加载，在生产环境下进行懒加载。例如：const _import = require('./_import_' + process.env.NODE_ENV)，在加载组件的时候可以这样写：component: _import('permissions/roleindex')。
-
- 组件之间的通信方案简述：
-
- Vue 中组件之间的通信方式有很多种，主要包括以下几种：
-
-
- 通过 props 传递：这是父子组件之间通信的常用方式，父组件通过属性传递数据给子组件，子组件通过 props 选项接收数据。
-
-
-
- 通过 emit` 触发自定义事件，将数据传递给父组件，父组件通过绑定监听器获取数据。
-
-
-
- 使用 ref：父组件可以通过 ref 来获取子组件的实例，从而访问子组件的数据和方法。
-
-
-
- 使用 EventBus：全局事件总线是一种适用于任意组件间通信的方式，通过 $emit、$on、$off 发布、监听、关闭事件。
-
-
-
- 使用 children：子组件可以通过 $parent 访问父组件的方法和数据，父组件可以通过 $children 访问子组件的实例。
-
-
-
- 使用 attrs 与 listeners：用于祖先传递数据给子辈，$attrs 包含了父级作用域中不作为 prop 被识别、获取的特性绑定，$listeners 包含了父作用域中的事件监听器。
-
-
-
- 使用 Provide 与 Inject：祖先组件通过 provide 传递数据给子孙组件，子孙组件通过 inject 接收数据。
-
-
-
- 使用 Vuex：适用于复杂关系的组件数据传递，Vuex 类似于一个存储数据的容器，通过 state、getter、mutations 和 actions 来管理数据。
-
- $event 的用法简述：
-
- 在 Vue 中，$event 是一个特殊的修饰符，它允许我们在事件处理函数中访问事件对象。通常与自定义事件一起使用，例如 v-on:click.stop="handleClick($event)"。在父元素和子元素之间，可以通过 $event 来获取触发事件的元素信息，从而进行相应的操作。
3. 工具函数与模拟数据
- 常用工具函数总结简述：
-
- Vue 项目中常用的工具函数有很多，比如日期格式化函数，可以将日期格式化为特定的字符串格式。还有获取 URL 参数的函数，可以从当前 URL 中获取指定的参数值。
- axios 二次封装简述：
-
- 对 axios 的二次封装可以包括设置请求拦截器和响应拦截器。在请求拦截器中，可以添加一些公共的请求头信息，或者对请求参数进行处理。在响应拦截器中，可以对响应数据进行统一的处理，比如判断响应状态码，处理错误信息等。
- 模拟数据的方法简述：
-
- 在 Vue 项目中模拟数据的方法有以下几种：
-
-
- 使用 Mock.js：可以模拟各种数据类型，包括数组、对象、数字等，并且可以设置随机数据生成规则。
-
-
-
- 自建 json 文件：可以创建一个 json 文件，里面包含模拟的数据，然后在项目中通过异步请求的方式获取这些数据。
-
三、Vue 项目实战感悟
1. 开发环境与模拟数据
- vue-cli 的 externals 设置简述：
externals 是来自于 webpack 的配置项，主要作用是提供了「从输出的 bundle 中排除依赖」的方法。例如，假如有几个项目都使用到了 axios，若不使用 externals，每个项目都会打包一份 axios 到 vendor 中。使用了 externals 之后，可以把 axios 进行外部引入，而 axios 的库文件可以用第三方 cdn 或者放到统一的 cdn 服务器上面。配置方法十分简单：
const externals = {
jquery: 'jQuery'
};
module.exports = {
configureWebpack: (config) => {
Object.assign(config, {
externals,
})
};
}
这里要打开 jquery.min.js 的查看 jquery 暴露的全局名称，jquery 的是 jQuery，然后在 index.html 中使用 script 引入就可以了：
- 开发过程中的模拟数据简述：
模拟数据在前端开发中经常用到，在后端同事没有完成接口的时候，前端需要自己模拟后端返回数据，提高工作效率。目前接触到的模拟数据方法有几个：
-
- Mock.js：Mock.js 应该算最常用的模拟数据库了，通过简单配置即可模拟接口数据。优点在于配置方便快捷，功能相对齐全。缺点是维护 mock.js 的人不多，很多代码已经是几年前的代码。
-
- Postman：Postman 中有自带 mock 的功能，配置也非常简单，而且不需要在项目中引入任何额外的库。而这个方法的问题是 Postman mock 的原理是把配置的接口上传到 postman 的服务器，很多公司的项目不希望自己的接口数据被别人知道，安全性不足。
-
- 自建 json 文件：自己新建接口返回值对应的 json 文件，代码中判断是开发模式还是生产来切换。好处是所有的数据都能自己配置，不受其他库和平台的约束。不足是需要自己写代码，不够简便。
-
- 自建 api 服务器：利用 webpack dev server 使用 express，搭配上 express 可以自建一个 api 服务器。具体操作如下：
const { setApi } = require('./mock/api');
// vue.config.js
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 3000,
https: false,
disableHostCheck: true,
before: (app) => {
setApi(app)
},
},
使用 app 实例创建 api 服务器（可以加入 swagger 等等的库，增加 api 服务器的用户体验）：
//./mock/api.js
const swaggerUi = require('swagger-ui-express');
const submit = require('./submit');
const setApi = (app) => {
const apiData = {
api: [
...cj,...submit,...question,...vote
]
}
const swaggerDocument = {
"swagger": "2.0",
"paths": {
"/pets": {}
}
}
apiData.api.forEach((api) => {
app[api.type](`/api${api.paths}`, (req, res) => {
res.json(api.responses);
});
swaggerDocument.paths[`/api${api.paths}`] = {
[api.type]:
{
tags: [api.tags],
responses: {
[api.responses.statusCode]: {
"description": `successful operation ${JSON.stringify(api.responses)}`
}
}
}
}
});
app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, {
swaggerOptions: {
validatorUrl: null,
}
}));
}
module.exports = { setApi };
//./mock/submit.js
module.exports = [
{
type: 'post',
paths: '/submit',
tags: 'submit',
responses: {
statusCode: '200',
data: '',
msg: '提交成功！',
},
},
];
最终效果是请求 http://ip 地址 /api/ 接口名称 可以请求数据，请求 http://ip 地址 /api/docs，可以看到自定义的接口文档。
2. 模块导入与样式处理
- 搭配 externals 的模块导入简述：
当我们使用前面说到的 externals 的时候，原则上来说我们不再需要去安装已经设置了 externals 的模块。正如上面的例子，Script 引入了 jquery 之后，我们不需要再 npm i jquery。
- 灵活运用双向数据绑定简述：
Vue 双向绑定是指在 Vue 框架中，当数据发生变化时，视图会自动更新，反之亦然。这意味着当用户在界面上修改数据时，相应的 Model 也会自动更新，而当 Model 中的数据发生变化时，视图也会自动更新。在使用双向绑定时，需要注意一些潜在的问题，例如性能优化和数据的一致性。对于大型应用程序或需要处理大量数据的情况，可能需要采用其他更高效的方法来管理数据和视图。总之，Vue 双向绑定简化了数据和视图的同步，提高了开发效率和用户体验。在使用双向绑定时，需要注意一些潜在的问题，并根据具体情况选择适当的方法来管理数据和视图。
四、Vue 小型项目练手案例
1. 适合初学者的练手项目推荐
Vue 是一个流行的前端框架，对于初学者来说，选择合适的练手项目可以帮助他们快速掌握 Vue 的基本概念和开发技巧。以下是一些适合初学者练手的 Vue 小项目推荐：
- Vue2.0 入门项目：项目地址为 GitHub - SD-Gaming/Vue2.0_to_do_list-addName-: Vue2.0入门项目。这个项目适合刚接触 Vue 的开发者，通过实现一个简单的待办事项列表，学习 Vue 的基本数据绑定、事件处理和组件化开发。
- 慕课网 Vue2.0 购物车教程 (注释版)：GitHub - SD-Gaming/Vue2.0-ShoppingCart-MOOC: 慕课网Vue2.0购物车教程(注释版)。该项目以购物车为例，讲解 Vue 在实际应用中的数据管理和交互设计，对初学者理解 Vue 的状态管理和组件通信很有帮助。
- 初中级项目：CNode 社区：GitHub - SD-Gaming/Vue2.0_CNode.bbs: 初级项目：CNode社区。这是一个对 CNodeJS 社区的重构项目，适合初学者在实践中掌握 Vue 的路由管理、数据请求和组件化开发。
- 基于 vue2.0 的网易云音乐播放器：api 来自于 NeteaseCloudMusicApi，项目地址为 http://www.daiwei.org/vue-music/，源码地址为 GitHub - IFmiss/vue-website: :cake: 想用vue把我现在的个人网站重新写一下，新的风格，新的技术，什么都是新的！。通过这个项目，初学者可以学习到如何调用外部 API 以及实现音乐播放功能。
- Vue 音乐搜索、播放 Demo：GitHub - Sioxas/vue-music: Vue 音乐搜索、播放 Demo。该项目专注于音乐搜索和播放功能，有助于初学者了解 Vue 与音频处理相关的开发技巧。
- 基于 vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo 回声：liansixin.win，源码地址为 GitHub - uncleLian/vue2-echo: 基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声。这个项目展示了如何使用 Vue 的全家桶（vue-router、vuex）构建一个复杂的音乐应用，适合有一定基础的初学者进一步提升技能。
- 基于 vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条（移动端）：liansixin.win，源码地址为 GitHub - uncleLian/vue2-news: 基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条（移动端）。通过这个项目，初学者可以学习到新闻类应用的开发，包括数据获取、列表展示和路由管理等。
- Xiaomi Mobile Mall. 小米移动商城：http://show.thisummer.com/mi，源码地址为 GitHub - Jon-Millent/mi-shop: xiaomi mobile mall.。该项目模拟小米商城的功能，涉及商品展示、购物车等功能，适合初学者练习 Vue 的状态管理和组件通信。
- 仿网易云 WebApp，基于 vue 实现的 WebAPP：GitHub - tgsx/Web_MusicAPP: 基于vue实现的WebAPP。这个项目让初学者可以深入了解如何实现一个类似网易云音乐的 Web 应用，包括用户界面设计和音乐播放功能。
- vue+express+socket.io 仿微博、微信的聊天社交平台：GitHub - CBDxin/VueSocial: something like QQ、weibo、weChat（vue+express+socket.io仿微博、微信的聊天社交平台）。通过这个项目，初学者可以学习到实时通信和社交平台的开发，涉及到 Vue 与后端技术的结合。
2. 项目搭建与布局
以 “Vue2.0 入门项目” 为例，介绍 Vue 小项目的搭建过程。
一、环境搭建
- 安装 Node.js：Vue 的运行依赖于 Node 的 npm 管理工具。可以在官网（Node.js 中文网）下载适合自己电脑系统的版本，安装完成后在命令行输入node -v，如果能输出版本号，则说明安装成功。
- 使用淘宝 npm 镜像：由于在国内使用 npm 速度较慢，推荐使用淘宝的 cnpm 命令管理工具。在命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org进行安装。
- 全局安装 vue-cli 脚手架：安装淘宝镜像后，输入命令cnpm install --global vue-cli，安装完成后输入vue -V查看版本号，确认安装成功。
二、项目创建
- 进入项目目录：选择一个合适的目录，进入该目录后在命令行输入vue init webpack 项目名，这里以 “Vue2.0 入门项目” 为例，项目名可以自定义。在创建过程中，会有一些选项需要选择，如 Vue build 可直接回车；Install vue-router 根据需求选择，一般建议选择 Y；Use ESLint to lint your code 对于初学者可以选择 n，不进行 js 语法检测；Set up unit tests 和 Setup e2e tests with Nightwatch 也可以选择 n，暂时不需要这些功能。
三、项目布局
- 项目结构：创建完成后，项目文件夹中会包含多个目录和文件。其中，build目录包含构建脚本，如build.js用于生产环境构建，webpack.base.conf.js是 webpack 基本配置等；config目录是项目配置文件，如dev.env.js是开发环境变量配置；node_modules是 npm 加载的项目依赖模块；src目录是开发的主要目录，包含assets（资源目录）、components（组件目录）、router（前端路由配置）、App.vue（根组件）、main.js（入口文件）等。
- 组件开发：以 “Vue2.0 入门项目” 为例，可以在components目录下创建自定义组件，如TodoList组件用于展示任务列表，TodoItem组件用于展示单个任务，TodoInput组件用于添加新任务。在App.vue中引入这些组件，进行页面布局。
- 数据绑定和事件处理：使用 Vue 的v-model指令实现双向数据绑定，如在输入框中绑定任务内容；使用v-on指令处理添加、删除和标记任务完成等事件。
- 路由配置：在router目录下的index.js文件中配置路由路径，实现页面之间的导航。例如，可以配置不同的路由对应不同的组件，实现单页面应用的页面切换效果。
五、Vue 小型项目心得体会
1. UI 框架与组件封装
- UI 框架的选择与使用简述：在 Vue 项目中，选择合适的 UI 框架可以极大地提高开发效率。以 element-ui 为例，它具有功能丰富的优点，提供了各种常用的 UI 组件，如表单、导航、表格、按钮、布局等，能够满足大多数 Web 应用的开发需求。同时，它的主题样式丰富，用户可以快速选择合适的主题样式，使 Web 应用的界面更美观，并且文档详细，对每个组件都有详细的使用说明，方便用户快速上手。然而，element-ui 也存在一些缺点，比如体积较大，在应用中引入它会增加项目的体积，对于一些追求性能的应用可能不太适用。而且它不支持单独引入其中的某个组件，如果只需要使用其中的一个组件，那么整个 element-ui 都需要引入，会导致项目体积增大。
- 组件封装的灵活把握简述：在 Vue 项目中，组件封装是提高代码可维护性和可复用性的重要手段。何时选择封装组件，何时自己编写，需要根据具体情况来决定。如果某个功能模块在多个地方都可能被用到，并且具有一定的独立性和复杂性，那么封装成组件是一个不错的选择。例如，一个自定义的表格组件，可能在多个页面中都需要展示不同的数据，但表格的样式和交互逻辑是相似的，这时就可以将其封装成组件。而对于一些简单的功能，或者只在特定场景下使用的功能，可以直接在使用的地方编写代码，而不需要封装成组件。总之，要根据功能的复用性、独立性和复杂性来灵活把握组件封装的时机。
2. 目录与请求管理、Vuex 的应用
- 目录和 http 请求的管理简述：在 Vue 项目中，对目录和 http 请求进行模块化管理可以提高代码的可维护性和可扩展性。可以在项目中创建一个专门的 http 目录，用于封装 axios 请求方法。例如，可以创建一个 index.js 文件，在其中创建 axios 实例对象，并设置请求拦截器和响应拦截器，对请求和响应进行统一处理。同时，可以创建一个 api.js 文件，统一管理接口地址，方便在项目中进行调用。在 main.js 入口文件中引入封装好的 http 文件，并将其挂载到 Vue 原型上，这样在组件中就可以通过 this.$http 来发送请求。
- Vuex 的作用与使用场景简述：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它的作用是解决多组件状态共享的问题，在大型的项目中，组件通讯会变得很混乱，使用 Vuex 可以统一管理组件之间的通讯。Vuex 适用于以下场景：当应用程序的状态需要在多个组件之间共享时；当应用程序的状态需要被频繁修改时；当应用程序的状态需要被集中管理和追踪时；当应用程序的状态变化需要被异步处理时。例如，用户信息（姓名，头像）可能会在很多个地方使用，这时就可以使用 Vuex 来管理用户信息，实现所有组件间的数据共享。
3. 开发技巧与问题解决
- name 的使用问题简述：在 Vue 项目中，name 属性在组件中有重要的作用。对于 Vue3，如果在开发中使用了