【搭建vue3工程化项目第一步】

---

前言

对于Vue2，官方推荐用Vue-cli创建项目；而对于Vue3，可以使用Vite创建项目，因为vite能够提供更好更快的调试体验。

一、安装Node.js

可去官网下载，看下如下界面表示安装成功：

二、创建一个Vite的初始化项目

1、命令行窗口，输入：npm init @vitejs/app
之后，Project name这一行，输入项目名；接着，Select a framework 这一行输入框架名字，选择vue；在之后，Select a Variant这一行，不用TS的话，选vue。

2、目录结构

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

3、使用npm i ，然后使用npm run dev 跑项目

现在项目有了工程化的雏形，从上往下看项目结构：我们所有工程化体系都是基于Node.js生态；我们使用VS Code+Volar编辑器 + 语法提示工具作为上层开发工具；使用Vite作为工程化工具；使用Chrome进行调试，这些都是Vue3工程化体系的必备工具。

4、安装vue-router和vuex
我们开发的项目是多页面的，所有vue-router和vuex是必选项，就像团队需要人员配比，vue负责核心，vuex负责管理数据，vue-router负责管理路由：

npm install vue-router@next vuex@next

规范：

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

总结

以上就是vite工程化的搭建步骤