Vue3实战(05)-教你快速搭建Vue3工程化项目

news2024/12/23 15:13:50

除了Vue 3这个库,还需Vue 3 最新全家桶。

1 环境准备

之前语法演示直接使用script引入Vue 3,从而在浏览器里实现所有调试功能。但实际项目中,使用专门调试工具。在项目上线之前,代码也需打包压缩,并考虑到研发效率和代码可维护性,所以在下面,需建立一个工程化项目实现这些功能。

工具

  • VS Code写Vue 3的代码
  • 直接在Chrome浏览器里展示

image-20231012141518814

  • Vue 2官方推荐Vue-cli创建项目
  • Vue 3建议使用Vite创建项目,因为vite能够提供更好更快的调试体验。使用Vite前,先安装Node.js

推荐使用VS Code的官方扩展插件Volar,这个插件给Vue 3提供了全面的开发支持。我们访问Volar的 地址,直接点击Install,就会启动VS Code并且安装。然后使用Chrome访问 Vue 3调试插件的 地址 ,可以帮助我们在浏览器里高效的调试页面。

命令行窗口对vuejs目录执行下面的命令,创建一个Vite的初始化项目。

npm init @vitejs/app

之后,在Project name这一行,我们输入项目的名字,例如geek-admin;接着,在Select a framework这一行输入框架的名字,这里我们选择vue;再之后,在select a variant 这一行,因为在项目里,我们没有选择TS,所以这里我们依然选择vue即可。

看geek-admin下面的文件目录,这个目录就是我们项目启动的骨架了。目录中的index.html是项目的入口;package.json是管理项目依赖和配置的文件;public目录放置静态资源,比如logo等图片;vite.config.js就是和Vite相关所有工程化的配置;src就是工作的重点,我们大部分的代码都会在src目录下管理和书写,后面我们也会在src目录下细化项目规范。

.
├── README.md
├── index.html           入口文件
├── package.json
├── public               资源文件
│   └── favicon.ico
├── src                  源码
│   ├── App.vue          单文件组件
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js          入口
└── vite.config.js vite工程化配置文件

2 Vue2.x V.S Vue3.x

2.1 main.js

  • 通过按需导入的 createApp 方法构建 vue 实例
  • 通过 vue实例.use 挂载插件(router 、 wuex)
  • 没有了 wue 构造方法,也就无法再挂载原型

2.2 App.vue

组件内部结构无变化

依然是:

  • tempalte
  • script
  • style
template标签

支持多个根标签。

2.3 store/index.js

  • 通过 按需导入的createStore 万江来来构建store 实例
  • 无需再通过 Vue.use(vuex) 形式挂载

2.4 route/index.js

  • 通过 按需导入的createRouter 万法来构建router

  • 通过按需导入的 createWebHashHistory 方法来创建

  • 无需再通过 Vue.use(VueRouter) 形式挂载

  • routes 路由表的定义无差别

2.5 小结

vue3 的初始化项目中,与 vue2 对比的最大差异其实就是:

  • vue3 使用 按需导入的形式 进行初始化操作
  • template标签中支持多个根标签

之后,在geek-admin文件夹内执行npm install 命令,来进行依赖的安装,然后执行npm run dev 命令来启动项目,看到如下信息就算是启动成功了。

打开 http://localhost:3000/:

完成项目初始化后,细化src目录,搭建源码骨架。我们去VS Code里打开项目,修改一下src目录下的App.vue 文件。例如,我们改动一下文件中的HelloWorld组件,把msg改成“你好,javaedge”,之后你会发现浏览器不需要我们去刷新,首页大标题就自动更新了,这种热更新的开发体验会伴随我们整个项目开发,极大提高我们的开发效率。

现在项目架构如下,拥有工程初步。从下往上看这个架构:

  • 所有工程化体系都是基于Node.js生态
  • VS Code+Volar编辑器+语法提示工具作为上层开发工具
  • 使用Vite作为工程化工具
  • 使用Chrome进行调试

都是Vue 3工程化体系的必备工具。

image-20231012142759413

开发项目是多页面,所以vue-router和Vuex也成为必选:

  • Vue负责核心
  • Vuex负责管理数据
  • vue-router负责管理路由

geek-admin目录中使用下面这段代码安装Vuex和vue-router。

npm install vue-router@next vuex@next

框架搭建完毕后,我们如何在项目的src目录下面组织我们的路由和其他代码呢?我们需要制定一些基本的规范,最常见的规范就是使用文件夹来做区分。对于如何做分区,下面的规范这一部分就会介绍到。

3 规范

无规矩不成方圆,团队项目中的规范尤其重要。我们先对几个文件夹的分层进行规定,便于管理,下面是src目录的组织结构。

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

我们的页面需要引入路由系统,我们进入到router文件夹中,新建index.js,写入下面的代码:

import {
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'

  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]

  const router = createRouter({
    history: createWebHashHistory(),
    routes
  })

  export default router

上面的代码中,我们首先引入了createRouter和createWebHashHistory两个函数。createRouter用来新建路由实例,createWebHashHistory用来配置我们内部使用hash模式的路由,也就是url上会通过 # 来区分。

之后在上面的代码里,我们引入两个组件about和home,根据不同的访问地址 //home 去渲染不同的组件,最后返回router即可。

现在页面就会报错,提示我们找不到about和home这两个组件,然后我们去pages下面新建两个文件,分别输入如下内容:

<template>
    <h1>这是关于页面</h1>
</template>
<template>
    <h1>这是首页</h1>
</template>

注意,这两个文件是以 .vue 作为后缀的,这是Vue中单文件组件的写法,我们可以在一个文件中通过template、script和style来维护Vue组件的HTML、JavaScript和CSS。然后我们在main.js中,加载router的配置:

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index'
createApp(App)
    .use(router)
    .mount('#app')

然后去App.vue中,我们删掉template之前的代码,加入如下内容:

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

代码中的router-link和router-view就是由vue-router注册的全局组件,router-link负责跳转不同的页面,相当于Vue世界中的超链接a标签; router-view负责渲染路由匹配的组件,我们可以通过把router-view放在不同的地方,实现复杂项目的页面布局。

我们在浏览器中打开 http://localhost:3000/,就会看到下图的页面,点击“关于”和“首页”都会有页面切换的效果。

image-20231012143145866

我们打开Chrome的调试窗,这也是我们以后常用的调试页面,在Vue这个标签页中,能很清晰地看到组件的层级关系。

至此,一个多页面的Vue开发项目雏形就完成了,页面架构变成:

还不够,实际项目开发中还有各种工具集成,如:

  • 写CSS代码时,要预处理工具stylus或sass

  • 组件库开发中,我们需要Element3作为组件库

  • 网络请求后端数据的时候,要Axios

对于团队维护的项目,工具集成完毕后,还要有严格的代码规范。我们需要Eslint和Prettier来规范代码的格式,Eslint和Prettier可以规范项目中JavaScript代码的可读性和一致性。

代码的管理还需要使用Git,我们默认使用GitHub来托管我们的代码。此外,我们还会使用commitizen来规范Git的日志信息。

对于我们项目的基础组件,我们还会提供单元测试来确保代码质量和可维护性,最后我们还会配置GitHub Action来实现自动化的部署。

最后项目架构:

项目雏形搭建完毕后,后面用到哪一块就会把哪一块加上,也就是用一个循序渐进的方式学习。 比如我们下一讲完成一个独立功能的时候,才会把Git规范加上。至此,项目搭建完毕,在下一讲中,我们开启下一步,也就是页面的主体代码编写。

4 总结

环境准备阶段,我们基于Vite 2和Vue 3搭建了我们项目的初始化框架,包含文件规范、工程化、路由和开发的基础配置,后面我们所有的代码都会在这个架构基础之上进行添加。你可以理解环境准备阶段是给Vue 3提供装备的过程,vue-router提供路由的管理、Vuex管理数据流、VS Code+Chrome+Vite则提供了极致的开发调试体验。

制定了代码和文件夹规范。后续新增组件就要去src/components目录,新增数据请求就去src/api目录。并且main.js在项目入口对路由数据进行了注册,这样我们就能够通过执行 npm run dev 启动这个项目。之后,我们就能看到首页和关于页面,这样项目的雏形我们就搭建完毕。

最后展示了一下整个项目架构的全景图,你能看到,从环境的准备到项目的初始化,再到搭建完成项目雏形,整个项目架构的全景图也在项目开发过程中逐渐完善。

本文由博客一文多发平台 OpenWrite 发布!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1084689.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言文件操作(2)

&#x1f649;本文将继续对文件操作相关知识进行讲解 1. 文件的随机读写 1.1 fseek fseek函数原型&#xff1a; fseek简而言之就是设置文件中的光标&#xff0c;stream就指向对象文件的指针&#xff0c;offset是文件中光标处相对于起始位置的偏移量&#xff0c;origin是光标所…

Docker 容器应急

容器网络简单理解 容器拥有n多张veth网卡与一张docker0网卡 docker 五种网络 bridge 默认网络&#xff0c;Docker启动后创建一个docker0网桥&#xff0c;默认创建的容器也是添加到这个网桥中。host 容器不会获得一个独立的network namespace&#xff0c;而是与宿主机共用一个…

关于Win系统提示由于找不到msvcr120.dll文件问题解决办法

在我使用电脑的过程中&#xff0c;突然弹出了一个错误提示框&#xff0c;提示我系统中缺少msvcp120.dll文件。这个文件是系统运行所必需的&#xff0c;缺少它可能会导致一些软件无法正常运行。经过一番搜索和咨询&#xff0c;我找到了以下几种解决方案&#xff0c;分享给大家&a…

【Java学习之道】文件输入输出流

引言 今天&#xff0c;我们将一起学习Java中的文件输入/输出流&#xff0c;这是许多初学者感到困惑但实际工作中经常遇到的问题。在本部分&#xff0c;我们将探讨文件输入/输出流的基本概念&#xff0c;以及如何使用Java中的类来处理文件输入/输出。 一、文件输入/输出流的概…

C语言,输出最长连号的个数

数据范围&#xff1a;0 < n <10000. 最长连号&#xff0c;就是一组数字里面出现的连续的数字的最长长度。这里的连号最长是2 3 4 5 6&#xff0c;个数为5。 要实现求连号的个数&#xff0c;就要创建一个变量&#xff0c;用来专门计算连号的个数。在不满足连号时&#xf…

shiro反序列化漏洞分析

分析源码 我们去源码里面去找找&#xff0c;搜索rememberMe&#xff1a; 发现有一个 CookieRememberMeManager 这个类&#xff0c;看名字就知道他多半就是处理 RememberMe 的逻辑&#xff0c;所以根据该类查看它干了什么 这里继承 AbstractRememberMeManager 类&#xff0c;Ab…

精益生产与MES生产管理系统相互融合

近年来&#xff0c;精益生产理念在企业管理中越来越受欢迎。它强调以最小的浪费&#xff0c;在最短的时间内&#xff0c;生产出高质量的产品。这一理念的实施手段包括准时制生产方式、适时生产方式等&#xff0c;消除浪费、看板、快换工装等都是精益提高的工具方针。 然而&…

【基础篇】四、本地部署Flink

文章目录 1、部署模式2、本地独立部署会话模式的Flink3、本地独立部署会话模式的Flink集群4、向Flink集群提交作业5、Standalone方式部署单作业模式6、Standalone方式部署应用模式的Flink 1、部署模式 会话模式&#xff08;Session Mode&#xff09; 先启动Flink集群&#xff0…

【BugBounty】记一次XSS绕过

前言 最近一直在看国外的赏金平台&#xff0c;绕waf是真的难受, 记录一下绕过的场景。 初步测试 一开始尝试XSS&#xff0c;发现用户的输入在title中展示&#xff0c;那么一般来说就是看能否闭合&#xff0c;我们从下面图中可以看到&#xff0c;输入尖括号后被转成了实体。 …

人大金仓数据库V8 windows下安装

此文为人大金仓数据库安装程序&#xff08;windows下kingbase开发及测试用&#xff09;。 1 人大金仓-成为世界卓越的数据库产品与服务提供商 官方下载安装包&#xff0c;同时需要下载授权文件&#xff0c;补丁文件可以不下。 2 点击安装 3 选择授权文件 4 默认安装即可&…

百万买手,小红书电商商业化之锚

继直播电商平台后&#xff0c;双11再次迎来新玩家——小红书。 在“2023小红书双十一电商伙伴动员会”上&#xff0c;小红书宣布将在双十一期间投入百亿流量扶持和亿级补贴&#xff0c;这也标志着小红书正式参与到这场电商盛宴中。 值得关注的是&#xff0c;小红书提到要投入…

【EI会议征稿】第三届大数据、人工智能与风险管理国际学术会议 (ICBAR 2023)

第三届大数据、人工智能与风险管理国际学术会议 (ICBAR 2023) 2023 3rd International Conference on Big Data, Artificial Intelligence and Risk Management 第三届大数据、人工智能与风险管理国际学术会议&#xff08;ICBAR2023&#xff09;将于2023年11月24-26日在中国成…

2023年,PMP的知识是否过时了?

关于PMP现如今还是否实用&#xff0c;是否过时了这一问题我也考虑过。PMP的知识是否是只能在传统行业应用&#xff1f;它适合在互联网领域进行项目管理吗&#xff1f; 首先&#xff0c;要说清楚PMP是什么&#xff1f; PMP&#xff08;Project Management Professional&#x…

Vue 关于组件封装时父子组件通讯的三种方式

主要是遵循vue的单向数据源规则&#xff0c;具体用什么方式取决于自己以及项目实际情况 如果是基本类型&#xff0c;可以使用比较简单直接的方法&#xff0c;这里三种方式主要是针对的对象&#xff0c;里面会包含多个参数 方式一&#xff1a;直接通过props直接修改子组件里的值…

从一部iPhone手机看芯片的分类

目录 问题 iPhone X 手机处理器&#xff1a;A11 iPhone X 的两大存储芯片 数字 IC CPU&#xff1a;计算设备的运算核心和控制核心 GPU&#xff1a;图形处理器 ASIC&#xff1a;为解决特定应用问题而定制设计的集成电路 存储芯片&#xff1a;DRAM 和 NAND Flash iPhone…

成集云 | 管家婆ERP集成金蝶云星辰 | 解决方案

源系统成集云目标系统 ​ 编辑 方案介绍 管家婆ERP系统是一个全面而灵活的企业资源计划平台&#xff0c;旨在帮助企业优化和自动化其业务流程&#xff0c;从而提高效率和生产力。该系统集成了从供应链管理、生产管理、财务管理到人力资源管理等所有企业运营方面的功能&#x…

时刻保护留守/独居老人,TSINGSEE青犀AI智能视频监控云监管方案

随着老龄化的发展&#xff0c;老弱群体逐年攀升&#xff0c;其中也不乏独居和留守老人&#xff0c;由于子女和监护人不能时刻陪伴左右&#xff0c;独居老人的日常生活安全&#xff0c;也是大家十分关注的一点&#xff0c;旭帆科技独居/留守老人智能监控方案&#xff0c;为了确保…

centos7.9部署nexus内网源服务器(yum,apt)

1、通过官网或其他方式下载安装包 2、安装Java&#xff0c;自行下载 [rootlocalhost ~]# ll total 189992 -rw-------. 1 root root 1663 Oct 8 09:06 anaconda-ks.cfg -rw-r--r--. 1 root root 194545143 Oct 8 17:43 jdk-8u241-linux-x64.tar.gz [rootlocalhost ~]# …

【C++】进阶模板

模板进阶 一、非类型模板参数二、模板的特化1. 函数模板的特化2. 类模板特化3. 模板特化的应用 三、模板的分离编译1. 分离编译2. 模板的分离编译3. 解决方法 四、模板总结 我们在 初识模板 中已经初步接触过模板了&#xff0c;下面我们开始更进一步学习模板。 一、非类型模板…

webservice接口自动化测试

1&#xff0c;用soupui进行测试 2&#xff0c;安装soupUI 3&#xff0c;测试的时候是给了一个wdsl 操作步诹&#xff1a;new &#xff08;name , 填写地址&#xff09;---导入wsdl文件---看到所有的接口 发送请求的格式<xml> canshu</xml> 应用场景&#xff0c…