前言
对于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工程化的搭建步骤