likes
comments
collection
share

初学Vue：了解Vue项目的安装与项目架构

作者站长头像
站长
· 阅读数 58

前言

Vue在如今的前端行业是数一数二的JS框架，它也是前端学习不可避免的一座大山，作为vue的第一课，首先来学会它的安装以及了解它的项目架构吧

Vue.js

了解vue

Vue.js（通常简称为Vue）是一种开源的渐进式JavaScript框架，用于构建用户界面，特别是单页面应用程序（SPA）。它由尤雨溪（Evan You）于2014年创建并维护至今，已迅速成为世界上最受欢迎的前端框架之一。Vue的核心设计理念在于提供一种更简洁、更易于理解和使用的工具来开发复杂的Web界面。

Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的前端应用程序提供强大的功能。Vue的特点包括：

  1. 声明式渲染：Vue采用声明式语法，允许你轻松描述应用程序应该呈现出什么样子，数据变化时自动更新DOM。

  2. 组件化：Vue鼓励采用组件化的方式构建应用，每个组件都有自己的视图和逻辑，易于复用和维护。

  3. 响应式系统：Vue的模型是基于数据驱动的，当数据发生变化时，Vue能高效地计算出最小数量的DOM操作来更新视图。

  4. 指令系统：Vue提供了一套指令（如v-if, v-for, v-bind, v-on等），使得操作DOM和处理事件变得简单直观。

  5. 虚拟DOM：Vue使用虚拟DOM来提高性能，只在数据变化时计算并应用必要的DOM更新。

  6. 易于上手：Vue的学习曲线相对平缓，官方文档清晰且全面，适合新手快速入门。

  7. 工具链支持：Vue CLI（Vue命令行工具）提供了快速构建项目、配置Webpack以及其他开发工具的能力。

  8. 生态系统丰富：Vue拥有强大的生态系统，包括Vue Router（路由管理）、Vuex（状态管理）、Vue Test Utils（测试工具）以及丰富的第三方库和插件。

  9. SSR与PWA支持：Vue支持服务器端渲染（Server-Side Rendering, SSR）和渐进式Web应用程序（Progressive Web App, PWA），有助于提升SEO和用户体验。

Vue的设计哲学是尽可能保持核心库的小而精，同时通过插件和库来增强功能，这使得开发者可以根据项目需求灵活选择技术栈。

vue的安装

vue的安装也很便捷，只需在对应的项目目录的集成终端中输入以下命令：

npm create vue@latest

就可以开始你的vue之旅了。

在输入之后，会提醒你输入自己的项目名称

之后会提示你是否安装vue的一些外置插件，多如繁星的外置插件以及第三方库共同构成了vue丰富的生态环境。

初学Vue：了解Vue项目的安装与项目架构

这些插件按需选择。

在引入插件之后就结束了，而vue的安装程序也会提示你之后的操作。

初学Vue：了解Vue项目的安装与项目架构

而这里的第一句：

cd my-vue-project

是提示你跳转到你自己的项目目录下，cd 后接你自己的项目名称

npm install\npm i

安装项目依赖，install可缩写为i

npm run dev

运行项目

一个vue的项目就安装完成了

运行后就可以在端口中打开了

初学Vue：了解Vue项目的安装与项目架构

vue的项目架构

一个vue文件会有以下文件或文件夹，我来一一解释：

初学Vue：了解Vue项目的安装与项目架构

node_modules

在Vue项目中，node_modules 文件夹是一个非常重要的目录，可以说是一个vue项目的灵魂所在，它存储了项目依赖的所有Node.js包（npm或yarn安装的库和框架）。当你使用npm或yarn命令安装Vue CLI、Vue本身、Vue Router、Vuex、以及各种开发和生产依赖时，这些依赖都会被下载并放入node_modules目录中。

node_modules目录的作用：

  1. 依赖管理：它帮助管理项目的依赖关系，确保每个依赖都有其独立的版本，避免了不同依赖间因为版本冲突而引发的问题。
  2. 代码隔离：每个依赖包及其子依赖都存放在各自的目录下，这样可以避免全局安装可能导致的版本混乱问题。
  3. 性能优化：一些包在安装时会进行编译或优化，生成针对当前环境（如浏览器或Node.js）的代码，这一步骤通常发生在首次安装或更新依赖时。
  4. 运行时依赖：在项目运行时，Node.js应用会直接从node_modules目录加载所需的模块，而构建工具（如Webpack）也会从这里获取Vue单文件组件（.vue）的加载器和其他必要的插件。

注意事项：

  • 不要直接修改：通常情况下，我们不应该直接修改node_modules中的文件，因为这些改动很容易丢失（下次执行npm install或yarn install时可能会被覆盖）。如果需要定制某个依赖的行为，应查看该依赖的文档，看是否支持配置或提供插件机制。
  • 版本控制：一般情况下，node_modules目录不应该被纳入版本控制系统（如Git）中，因为这个目录可能会非常大，且依赖可以从package.json和package-lock.json（或yarn.lock）文件中恢复。这些文件记录了项目的依赖版本信息，确保了其他开发者在克隆项目后，通过运行npm install或yarn能够获得完全相同的依赖环境。
  • 清理与更新：当遇到依赖问题或需要更新依赖时，可以使用npm update或yarn upgrade命令来更新node_modules中的包，或使用npm ci/yarn install --frozen-lockfile来基于锁定文件安装依赖，确保环境一致性。

public

在Vue项目中，public文件夹也是一个非常重要的目录，它存放的是公共资源，这些资源在构建过程中会被直接复制到最终的打包目录（默认为dist），并且不会经过webpack的模块转换处理。以下是public文件夹常见的用途和存放的文件类型：

  1. 静态资源：

    • 图片（.jpg, .png, .svg等）、视频或音频文件等静态媒体资源，可以直接放置在public目录下或其子目录中。在Vue组件中引用这些资源时，应使用绝对路径（从网站根目录开始），例如/img/logo.png。

  2. ** favicon.ico**：

    • 浏览器标签页上显示的网站图标通常放置在这里。

  3. 其他静态文件：

    • 任何不需要webpack处理的其他静态文件，如.txt文档、.pdf文件等。

  4. 特殊配置文件：

    • 在某些情况下，可能还会存放服务工人（Service Worker）脚本或其他需要直接暴露给浏览器的特殊配置文件。

src目录

在Vue项目中，src 目录是项目的核心源码目录，包含了所有开发者编写的代码和资源文件。这个目录下的结构对于项目组织至关重要，虽然不同的项目可能会有细微差异，但通常遵循一定的标准结构。下面是一个Vue项目中src目录可能包含的内容：

  1. main.js: 项目的入口文件，用于创建和配置Vue实例，引入路由、状态管理等。
  2. App.vue: 应用的根组件，通常包含整个应用的基本结构和布局。
  3. components: 存放可复用的Vue组件文件夹，这些组件可以被其他组件导入和使用。
  4. views: 如果项目使用了路由（Vue Router），这个文件夹可能用来存放路由组件，即根据不同的URL路径渲染的组件，其实就是由其他组件构成的页面级别组件。
  5. router: 包含路由配置文件，定义了应用程序的路由规则和导航逻辑。
  6. store: 当项目使用 Vuex或Pinia 状态管理模式时，这个文件夹包含状态管理的相关文件。
  7. assets: 存放静态资源，如图片、字体文件、CSS样式表等。这些资源会被Webpack处理并复制到输出目录。
  8. styles: 或者叫scss、css等，根据项目配置，存放全局样式文件或预处理器文件。
  9. utils: 放置一些工具函数或者帮助类的文件，提高代码复用性。
  10. services 或 api: 如果项目中有后端交互，这里可能存放与API接口交互的代码。
  11. layouts: 在一些复杂项目中，可能有专门的布局组件，用于定义页面的基本框架结构。
  12. mixins: Vue的混入文件，包含可以复用的功能代码块。
  13. plugins: 自定义的Vue插件或者是第三方插件的配置文件。 我们可以根据项目需求，可以灵活调整和增减这些目录结构。正确的组织结构有助于保持代码的清晰和可维护性。

其他

还有一些散装的文件，以下一一讲解：

.gitignore

在你上传代码时，系统会自动跳过该文件中记录的文件，以防仓库传入一些没有必要的文件。

index.html

它扮演着整个单页面应用程序（SPA）的基础HTML模板的角色。这个文件在项目构建时会被自动处理，并作为应用程序的入口点。以下是index.html的一些关键特性和用途：

  1. 基础HTML结构： 它定义了一个标准的HTML文档结构，包括<!DOCTYPE html>、<html>、<head>、<body>等标签。
  2. 元信息（Meta Tags） ： 在<head>部分，你可以设置网页的标题、描述、字符集、视口配置等元数据，这对SEO优化和浏览器渲染非常重要。
  3. 样式和脚本链接： 虽然Vue应用的主要CSS和JS文件是由Webpack在构建时生成并自动插入的，但你可以在此处手动添加任何全局的CSS样式表或外部脚本链接。
  4. Vue应用挂载点： 在<body>部分，你会找到一个具有特定ID（通常是id="app"）的元素，这是Vue应用的根组件将要挂载的地方。当Vue应用启动时，它会查找这个元素，并将渲染出的组件树插入其中。
  5. 服务工人（Service Worker）注册： 如果你的Vue应用支持离线访问或需要使用PWA（Progressive Web App）功能，你可以在index.html中注册服务工人。
jsconfig.json

这是一个配置文件，主要用于VS Code等编辑器中，以便提供更好的JavaScript和TypeScript项目支持。这个文件帮助编辑器理解项目结构，提供智能代码补全、模块解析以及快速跳转到定义等功能。当你在一个包含大量JavaScript或TypeScript文件的项目中工作时，jsconfig.json 就显得尤为重要。

在vue中，初始安装的jsconfig.json其实只是内置了一个Path功能，即将@符号代表./src/这个文件目录

package-lock.json

在Vue项目中，package-lock.json 文件是npm（Node.js包管理器）自5.0版本起引入的一个重要文件，它与package.json文件紧密相关。这个文件的作用主要包括：

  1. 锁定依赖版本：package-lock.json 文件详细记录了项目依赖包的实际安装版本，以及这些依赖包的子依赖及其具体版本。这样做确保了每次当你或你的团队成员在不同环境下重新安装依赖时，都会得到完全相同的一组依赖版本，从而避免了因依赖版本差异导致的“Works on my machine”问题。
  2. 提高安装速度：通过记录依赖关系的精确树状结构和文件哈希，npm可以更快地解析和安装依赖，因为它可以直接复用之前下载过的、匹配哈希的依赖包，而无需每次都重新解析版本兼容性。
  3. 安全性和透明性：package-lock.json 文件还增强了项目的安全性，因为它允许你审查所有直接和间接依赖的确切版本，便于跟踪潜在的安全漏洞或不兼容更新。
  4. 协同工作：当团队协作开发时，提交package-lock.json到版本控制系统（如Git）是非常推荐的。这确保了团队成员之间的一致性，避免了因依赖版本不一致而引起的构建或运行时错误。

尽管package-lock.json文件很重要，但它是由npm自动生成和维护的，通常不需要手动编辑。在执行npm install时，npm会自动创建或更新这个文件。在Vue项目中，保持package-lock.json的最新和提交它是维持项目依赖一致性的关键步骤之一。

package.json

在Vue项目中，package.json 文件是一个非常重要的配置文件，它位于项目的根目录下，使用npm或yarn等包管理工具初始化项目时自动生成。这个文件包含了项目的基本信息和依赖管理配置，是项目的核心配置文件。

vite.config.js

vite.config.js 是 Vite 构建工具的配置文件，用于自定义Vite在开发和生产环境下的行为。Vite是一个由Vue.js作者尤雨溪开发的现代化的前端构建工具，以其快速的热更新和原生ES模块支持著称。通过配置vite.config.js，开发者可以调整诸如服务器设置、构建输出、插件应用、别名设定等多种选项。

Readme.md

这是vue自带的说明文件，内部是对整个vue项目的一些说明。

结语

这就是一个vue项目的安装与项目架构的解释了，如果对你有帮助，点个赞再走吧！！！你的点赞对我真的很重要！！！！

转载自:https://juejin.cn/post/7394695190412050432
评论
请登录