十分钟带你入门Vue.js开发（Vue 3）

概览

在当前的前端领域，大家或多或少的都听说过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

1. 目前前端开发几乎都离不开Nodejs，所以安装它，可以参考《十分钟带你入门Node.js 开发》

2. 安装完Nodejs后，也会同时安装好它的包管理工具npm

3. 由于npm默认的服务在国外，国内访问很慢，需要配置它的国内镜像仓库

   jagitch@c8021a3112cf:~$ npm config set registry https://registry.npmmirror.com
   

4. 此时，我们就可以使用npm来安装Vue.js了

   jagitch@c8021a3112cf:vue$ npm create vue@latest
   Need to install the following packages:
   create-vue@3.10.3
   Ok to proceed? (y)
   

5. 安装后会自动执行create-vue来创建vue的脚手架，此处我们直接输入no回车。

6. 创建我们存放代码的目录

   jagitch@c8021a3112cf:~$ mkdir code && cd code
   

7. 使用npx create-vue创建第一个Vue项目，期间会有很多提示选择，除了修改项目名称，一路回车就可以了，那些选项的具体作用以后会出一些更详细的使用文章。

   jagitch@c8021a3112cf:code$ npx create-vue
   Need to install the following packages:
   create-vue@3.10.3
   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
   

8. 创建完成后，最后三行日志已经提示了我们如何运行代码，我们执行它

   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
   
   > vue-hello@0.0.0 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
   

9. 接下来，我们打开浏览器访问http://localhost:5173就可以看到我们的vue项目运行起来了

   

10. 接下来我们使用Vue来开发一个使用的web应用

通过一个例子，上手Vue的开发

相信读者到这里已经安装好了vue的开发环境，下面我们使用vue开发一个计算生日还剩多少天的实用web应用。

1. 创建项目

   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
   

2. 运行项目，执行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
   
   > vue-birthday-left@0.0.0 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
   

3. 我们使用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
   

4. 安装按需导入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
   

5. 修改项目根目录下的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))
       }
     }
   })
   

6. 配置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')
   

7. 安装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
   

8. 将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>
   

   1. 这个文件是Vue中一个单文件组件，Vue采用组件化的方式易于重用和维护

   2. template标签是Vue组件的表现层，采用html5

   3. <script setup>中是Vue组件的逻辑

   4. style标签是Vue组件的样式

   5. setup脚本中的answer是一个响应式数据，使用answer.value修改answer的值就可以改变表现层{{ answer }}的显示内容。

9. 在终端输入npm run dev -- --host 0.0.0.0运行项目，该生日计算器的使用界面如下图所示

   

补充

如需《生日计算器》源码，可以在本页最上面下载源码包

总结

本文首先介绍了由于Node.js的出现，改变了前端项目的开发方式，web前端项目越来越朝着工程化的潮流发展，前后端分离的开发方式也逐渐流行起来，Vue和React等前端框架也应运而生，Vue的声明式、组件化的开发方式解决了传统前端项目开发的痛点，项目开发效率成倍的提升。接着介绍了Vue的安装和基本使用；最后使用Vue开发了一个生日计算器的web应用，用实践的方式带领读者从项目搭建到编码到运行的一整个流程。由于介绍的内容比较多，难免会有一些令读者感到困惑的地方，如果有问题，欢迎到评论区留言。

推荐阅读

1. 十分钟带你入门mariadb数据库开发

2. 教你如何1秒安装一个Linux系统（ubuntu,debian,centos） 比虚拟机安装系统省时省心省力

3. 使用树梅派搭建Golang、Python、NodeJs的开发服务器

4. 十分钟带你入门Node.js 开发