Vue3 入门笔记一 ---- 创建Vue3项目和目录结构解释

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

前言

其实不算入门了，因为我已经用了一段时间vue了，但是以前一直就是写一些简单的页面和组件，但是vue整体是怎么架设的我其实不清楚，这次主要是为了整理一下这部分的内容，顺带从头到尾都写一份笔记总结一下。
笔记中很多内容都是参考了B站上一个UP主的视频，贴上链接，有兴趣的可以去看一下：Vue项目实战

开发环境介绍

我是通过windows11 上的VS code 连接到WSL上的，WSL是ubuntu 20.04的系统，所以我的开发环境是VS code + ubuntu。

这也是我工作中的开发环境，因为在ubuntu上开发相对于windows来说更方便，尤其是命令行操作方面，但是ubuntu又不能满足日工工作软件的需要，因为很多工作软件是没有ubuntu版本的，所以windows11+WSL 的模式挺不错的，推荐大家尝试。

npm 和 node 版本如下：

$ npm -v
8.13.2

$ node -v
v14.19.1

创建vue3项目框架

大家可以参考vue3的官网：创建一个Vue应用

先执行init命令

$ npm init vue@latest

执行之后会逐步出现一些配置让我们选择，建议新手只配置“Project name”，其他的都选NO， 以下是我的配置。

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3-notes
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /home/zhixiang_pan/learningspace/vue_study/vue3-notes...

Done. Now run:

  cd vue3-notes
  npm install
  npm run dev

我把Project name设置为vue-notes，这会在当前路径下生成一个vue3-notes目录。
配置完之后进入到vue3-notes目录（也就是你在project name选项中输入的那个路径）执行 npm install （安装必要的依赖） 和 npm run dev 就可以在本地运行一个vue3的样例应用了。

到这里就已经完成了一个vue3项目的创建工作了。

目录结构解释

在创建完Vue3项目并且初次安装依赖和运行本地环境之后，项目内目录结构应该如下图所示：

这里简单解释一下后面会用到几个目录和文件。

1. src
   src 目录就是存放源代码的总目录，一般来说vue相关的代码都会放在src里面
2. components
   vue3中有一个组件的概念，也就是把可以重复使用的代码抽出来单独封装成一个组件，这样就可以被不 同的地方调用，components目录就是用来存放这些组件的地方。
3. App.vue
   可以简单地把App.vue理解为一个根组件，也就是vue中所有的页面都会用到这个组件，换句话说，任何页面刷新，都会调用App.vue里面的代码。
4. main.js
   可以简单理解为这是整个站点的入口，整个vue项目从这里开始运行，所以一般会把一些影响全局的配置以及代码放在这里面。

还有一些其他的文件和目录，对于vue3入门理解来说影响不大，就不再多说，感兴趣的话可以去官网看看。