Vue3学习（一）项目搭建

Vue3学习（一）项目搭建

---

---

前言

在目前的前端开发中，流行的框架相信你并不陌生。比如Angular、React、Svelte 等框架。作为入门相对简单的渐进式Vue框架，从此切入学习会更加得心应手。

---

一、Vue3是什么？

Vue 3 作为 Vue 框架最新的版本，有很多优秀的设计相信你会非常喜欢，例如 Composition 组合 API、基于 Proxy 的响应式系统、自定义渲染器等

二、Vue3开发环境

除了Vue 3 这个库，我们还需要 Vue 3 的最新全家桶，也就是 Vue 3 的周边生态，这其实就和士兵需要武器装备是一样的。
Vue 2，官方推荐用 Vue-cli 创建项目，Vue3,建议使用 Vite 创建项目，因为 vite 能够提供更好更快的调试体验。
本文选择 Vue3 + Vite + Chrome + VScode编辑器

首先，安装node。下载安装 Node.js 的过程是傻瓜式的，直接去Node.js 官网下载安装即可。
安装完毕后，我们创建 vuejs 工作目录。
接下来，在命令行窗口里，我们对 vuejs 目录执行下面的命令，这样就可以创建一个 Vite 的初始化项目

npm init @vitejs/app

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

learning-vue3 下面的文件目录，这个目录就是我们项目启动的骨架了。目录中的 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工程化配置文件

1.项目启动

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

2.项目规范

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

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

---