概览
在当前的前端领域，大家或多或少的都听说过Vue.js，它是一款用于构建用户界面的Javascript框架。在Jquery的时代，我们改变页面元素的方式一般都是通过js获取元素，然后直接在该元素上进行修改；而Vue.js则另辟蹊径，它采用了一套声明式、组件化的编程模型，页面的表现于数据是分离的，我们如果需要改变页面元素，只需改变数据就可以了，Vue在底层会监听数据的变化，然后由Vue去操作DOM改变我们的页面，我们无需操作页面元素，只需声明页面组件的原始html以及数据就能得到我们想要的结果，这就是声明式的由来。
有了声明式的方式，我们就无需手动去构建和改变页面的DOM了，这些繁琐且易出错的操作Vue直接帮我们做好了，所以项目的开发效率得到了极大的提升，下面我们就来领略以下Vue的魅力。
简单聊聊前端的项目工程化
自从Nodejs问世后，js得到了空前的发展，它再也不用局限于只能在浏览器中运行了。有了Nodejs，前端的项目开发方式也发生了很大的变化。以前前端页面的生成都要以来后端语言的模板功能，例如Java的JSP，dotnet的ASP.net等，前端页面中的列表都是后端语言的进行循环渲染的，根本没有js什么事，但是到了现在，例如Vue、React等，所有页面相关的都是使用js来渲染的，因为有了Nodejs，我们就可以使用Vue编写js文件，使用Vue的语法创建页面元素，例如Vue可以通过循环数组来渲染一个ul列表，这个js文件不是部署时所用的，而是在项目开发中使用的，当项目开发完成，只需使用Nodejs运行项目生成部署所使用的html、js、css文件。这样前端项目就变得更加的工程化，易于维护。
前后端分离简直不要太舒服
自从Nodejs出现之后，前后端分离的做法逐渐流行了起来。以前都是前后端都在一个项目中，前端开发人员和后端开发人员的工作在html页面出现了交集，后端人员需要在html页面写后端代码，前端人员需要在html页面写布局、css以及js等，所以经常这部分工作会出现冲突，极大的降低了项目的开发效率。
当采用前后端分离的架构时，前端项目负责web页面的所有工作，后端项目只负责向前端项目提供数据。这种架构方式非常清楚地拆分了前后端工程师的职责，他们只需要做好自己的事情就可以了，不要等待对方的工作是否完成，在开发前他们约定Web API接口，就可以根据接口去实现自己的工作，前端在开发中可以使用根据接口规范构造测试数据，有了数据就可以驱动整个页面的显示了；后端开发人员只要保证自己提供的数据符合Web API接口。有了前后端分离的开发方式，开发效率那是直线上升并且前后端开发人员比以前也过得舒服多了，再也不用在同一个html文件中开发了。
安装Vue.js
-
目前前端开发几乎都离不开Nodejs，所以安装它，可以参考《十分钟带你入门Node.js 开发》
-
安装完
Nodejs后，也会同时安装好它的包管理工具npm -
由于npm默认的服务在国外，国内访问很慢，需要配置它的国内镜像仓库
jagitch@c8021a3112cf:~$ npm config set registry https://registry.npmmirror.com -
此时，我们就可以使用npm来安装Vue.js了
jagitch@c8021a3112cf:vue$ npm create vue@latest Need to install the following packages: [email protected] Ok to proceed? (y) -
安装后会自动执行
create-vue来创建vue的脚手架，此处我们直接输入no回车。 -
创建我们存放代码的目录
jagitch@c8021a3112cf:~$ mkdir code && cd code -
使用
npx create-vue创建第一个Vue项目，期间会有很多提示选择，除了修改项目名称，一路回车就可以了，那些选项的具体作用以后会出一些更详细的使用文章。jagitch@c8021a3112cf:code$ npx create-vue Need to install the following packages: [email protected] Ok to proceed? (y) Vue.js - The Progressive JavaScript Framework RangeError: Incorrect locale information provided ✔ Project name: … vue-hello ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? › No ✔ Add ESLint for code quality? … No / Yes ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes Scaffolding project in /home/jagitch/code/vue-hello... Done. Now run: cd vue-hello npm install npm run dev -
创建完成后，最后三行日志已经提示了我们如何运行代码，我们执行它
jagitch@c8021a3112cf:code$ cd vue-hello jagitch@c8021a3112cf:vue-hello$ npm install added 27 packages in 2m 4 packages are looking for funding run `npm fund` for details jagitch@c8021a3112cf:vue-hello$ npm run dev > [email protected] dev > vite VITE v5.2.12 ready in 246 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help -
接下来，我们打开浏览器访问
http://localhost:5173就可以看到我们的vue项目运行起来了
-
接下来我们使用Vue来开发一个使用的web应用
通过一个例子，上手Vue的开发
相信读者到这里已经安装好了vue的开发环境，下面我们使用vue开发一个计算生日还剩多少天的实用web应用。
-
创建项目
jagitch@4d7a018f5ea9:workspace$ npx create-vue vue-birthday-left Vue.js - The Progressive JavaScript Framework ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? › No ✔ Add ESLint for code quality? … No / Yes ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes Scaffolding project in /home/coder/workspace/vue-birthday-left... Done. Now run: cd vue-birthday-left npm install npm run dev -
运行项目，执行
npm install的时候可能要等待一会儿，--host 0.0.0.0参数可以让 局域网可访问，否则只能本机访问jagitch@4d7a018f5ea9:workspace$ cd vue-birthday-left jagitch@4d7a018f5ea9:vue-birthday-left$ npm install added 27 packages in 3m 4 packages are looking for funding run `npm fund` for details jagitch@4d7a018f5ea9:vue-birthday-left$ npm run dev -- --host 0.0.0.0 > [email protected] dev > vite --host 0.0.0.0 VITE v5.2.12 ready in 245 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.27.0.2:5173/ ➜ press h + enter to show help -
我们使用
Element PlusUI框架来快速开发web页面，所以安装它jagitch@4d7a018f5ea9:vue-birthday-left$ npm install element-plus --save added 23 packages in 5s 10 packages are looking for funding run `npm fund` for details -
安装按需导入
Element Plus UI组件所需的插件，按需导入可以减少最终项目打包后的大小jagitch@4d7a018f5ea9:vue-birthday-left$ npm install -D unplugin-vue-components unplugin-auto-import added 55 packages in 3s 26 packages are looking for funding run `npm fund` for details -
修改项目根目录下的
vite.config.js文件的内容为如下代码import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) -
配置
Element Plus的语言为中文，将src/main.js内容修改为如下所示：import { createApp } from 'vue' import ElementPlus from 'element-plus' import zhCn from 'element-plus/es/locale/lang/zh-cn' // Components import App from './App.vue' app.use(ElementPlus, { locale: zhCn, }) createApp(App).mount('#app') -
安装
date-fns日期处理包jagitch@4d7a018f5ea9:vue-birthday-left$ npm install date-fns added 1 package in 2s 27 packages are looking for funding run `npm fund` for details -
将
src/app.vue文件的内容替换为如下代码<template> <header class="header"> <h1 class="title">生日计算器</h1> </header> <article class="content"> <span class="label">请选择出生年月日</span> <el-date-picker v-model="elBirthday" type="date" placeholder="请选择日期" :size="size" :editable="false" @change="dateChange" /> <p> <span>{ { answer }}</span> </p> </article> </template> <script setup> import { ref, reactive } from 'vue' import { differenceInCalendarDays, differenceInYears, parse, addYears } from 'date-fns' const elBirthday = ref() var answer = ref('') function dateChange() { const curDate = new Date() var curYear = curDate.getFullYear() var birthDate = new Date(elBirthday._rawValue.valueOf()) var birthYear = birthDate.getFullYear() if (birthDate >= curDate) { answer.value = "还没出生呢？请重新选择日期" return } const days = differenceInCalendarDays( elBirthday._rawValue.setFullYear(curYear), curDate ) const years = curYear - birthYear if (days > 0) { answer.value = `今年你的家人或朋友${ years}岁了，距离生日还有${ days}天，千万要记住哦!` } else if (days == 0) { if (years != 0) { answer.value = `今天是你的家人或朋友${ years}岁生日，记得买生日礼物哦！` } else { answer.value = `你的家人或朋友今天出生了，恭喜恭喜` } } else if (days < 0) { var days2 = differenceInCalendarDays( elBirthday._rawValue.setFullYear(curYear + 1), curDate ) if (years) { answer.value = `糟糕，今年你错过了你家人或朋友${ years}岁的生日，已经错过${ (-days)}天了，下一个生日还有${ days2}天` } else { answer.value = `你的家人或朋友还没周岁，距离周岁还有${ days2}天` } } else { console.log(days) } } </script> <style scoped> .header .title{ margin: 0; } .content { padding: 30px 0; text-align: left; } .content .label{ display: block; margin-bottom: 15px; font-size: 1.2em; } </style>-
这个文件是Vue中一个单文件组件，Vue采用组件化的方式易于重用和维护
-
template标签是Vue组件的表现层，采用html5 -
<script setup>中是Vue组件的逻辑 -
style标签是Vue组件的样式 -
setup脚本中的
answer是一个响应式数据，使用answer.value修改answer的值就可以改变表现层{ { answer }}的显示内容。
-
-
在终端输入
npm run dev -- --host 0.0.0.0运行项目，该生日计算器的使用界面如下图所示
补充
如需《生日计算器》源码，可以在本页最上面下载源码包
总结
本文首先介绍了由于Node.js的出现，改变了前端项目的开发方式，web前端项目越来越朝着工程化的潮流发展，前后端分离的开发方式也逐渐流行起来，Vue和React等前端框架也应运而生，Vue的声明式、组件化的开发方式解决了传统前端项目开发的痛点，项目开发效率成倍的提升。接着介绍了Vue的安装和基本使用；最后使用Vue开发了一个生日计算器的web应用，用实践的方式带领读者从项目搭建到编码到运行的一整个流程。由于介绍的内容比较多，难免会有一些令读者感到困惑的地方，如果有问题，欢迎到评论区留言。
推荐阅读
2. 教你如何1秒安装一个Linux系统（ubuntu,debian,centos） 比虚拟机安装系统省时省心省力