Vue3项目——配置vue环境和构建一个vue项目

如果代码和文章中有什么错误或疑惑，欢迎随时提出交流哦~

---

配置环境

在搭建vue项目之前，第一步当然是配置环境啦

需要注意的是，vue2.0和vue3.0的版本是不同的，如果下载了不同vue版本，在后续的编写过程会有区别。

第一步：安装Node.js和NPM

Node.js 是运行 JavaScript 的环境，Vue CLI 是基于 Node.js 开发的，所以首先需要安装 Node.js。

可以通过在Node.js官网上下载Node.js的压缩包，将压缩包解压安装之后，就以及安装好了Node.js和NPM。

下面，我们可以在终端上验证这两个工具是否成功安装。

在终端上输入以下命令验证node.js：

node -v

得到如图则说明安装完成。

输入以下命令验证npm：

npm -v

说明安装成功。

如果有其他文字，估计就是出了问题，可以在评论区留言解决，或者询问ai哦。

第二步：安装Vue CLI

在终端上使用以下命令全局安装Vue CLI：

npm install -g @vue/cli

在安装完后可能会出现 “WARN” 或者 “WARNING” 的消息通常代表的是警告，不是说明错误。
而如果出现“ERROR”的话，才说明安装过程有什么错误，需要留意处理。

一样，在安装后可以使用以下命令来验证是否安装成功：

vue --version

正常效果如下：

构建一个vue项目

在新手学习vue项目时构建的vue项目，往往跟真正学会vue时搭建的vue项目不一样。
下面分享一个vue新手学习的搭建过程。

同样里面也给出了vue新手的学习过程。

vue项目的结构解析

Vue CLI生成的项目结构通常包含以下主要部分：

• src/：源代码目录，包含应用的核心逻辑和组件。
  • main.js：入口文件，启动应用。
  • components/：存放应用的组件。
  • views/（或pages/）：存放应用的主要视图或页面。
  • router/：存放应用的路由配置。
• public/：静态资源目录，如HTML、CSS和JavaScript文件。
• package.json：项目依赖和配置信息。
• .env（或.env.production）：环境变量配置文件。
• vue.config.js：自定义配置文件，用于调整构建设置。

在开发过程中，你可以根据需要添加、修改或删除这个结构中的文件和目录。Vue CLI会根据这些结构生成构建过程，确保项目的可维护性和扩展性。

而在我们的学习过程，通常是在src目录下，进行我们的代码编写。

组件

Vue 提倡"组件化的开发模式"，这种模式允许我们构建大型应用而不会感到压力。
组件（Component）是 Vue.js 中最核心的概念之一。
一个 Vue 组件其实就是一个拥有预定义选项的一个 Vue 实例。在 Vue 中，一个应用是由一些列的、可复用的组件构成的。

在一个 Vue 应用中，多个组件会一起协同工作，形成一个树形结构——父组件可以包含多个子组件，子组件也可以再包含他们的子组件，以此类推。这种组件树形结构，和我们在浏览器中看到的DOM结构非常相似。

这里所说的组件，通常都是在components目录下创建的，命名格式是首字母大写且以.vue结尾。而创建完之后，通常是App.vue文件下引用，可以看到App.vue并不在components目录下，它也被称为主组件，相当于我们C程序和Java程序当中的main文件。

vue文件

而在每一个.vue文件中，都有三个模块。
一个是<template>标签，一个是<script>标签，一个是<style>标签。

其中的<template>标签也就是存放html代码的地方。

而在<script>标签中会有一个export default{}，下面讲讲为什么会有这个东西？

Vue 采用了构建时编译的策略，不再支持在运行时动态编译模板。也就是说，所有 Vue 组件，包括根组件，都需要预先编译好模板，然后通过 export default 导出，供主程序在构建时处理。

在 Vue 设计中，鼓励将代码模块化，将一个组件的选项分离出来作为一个模块，然后通过 export default 导出，那他的好处是代码结构清晰，可维护性高，并且这也是 ES6 模块的导出方式，这种方式在现代 JavaScript 框架中普遍采用。