天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
兴酣落笔摇五岳，诗成笑傲凌沧洲。
功名富贵若长在，汉水亦应西北流。
------《江上吟》
文章目录
- Vue项目的构建方式
-
- [1. Vue3基于Vite构建项目](#1. Vue3基于Vite构建项目)
-
- [1.1 介绍](#1.1 介绍)
- [1.2 构建流程](#1.2 构建流程)
- [2. Vue3基于CLI构建项目](#2. Vue3基于CLI构建项目)
-
- [2.1 介绍](#2.1 介绍)
- [2.2 构建流程](#2.2 构建流程)
- [3. Vue2基于CLI构建项目（拓展）](#3. Vue2基于CLI构建项目（拓展）)
-
- [3.1 介绍](#3.1 介绍)
- [3.2 构建流程](#3.2 构建流程)
- [4. Vite和Vue CLI构建方式的区别](#4. Vite和Vue CLI构建方式的区别)
- [5. 推荐使用方式](#5. 推荐使用方式)
Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏
Vue项目的构建方式
node.js环境安装配置后，方可使用vue
以下介绍Vue项目的几种构建方式，后续会根据这几种构建方式实例演示Vue项目的构建。
关于Vue3的构建方式有两种，一种是新兴的基于Vite构建项目，一种是原来的基于Vue CLI构建项目
在Vue的官网教程中，已经默认使用了Vite进行项目的构建，故今后Vite应该会是主流，毕竟它启动更快，效率更高。
1. Vue3基于Vite构建项目
1.1 介绍
在Vue3的版本中，构建项目已经可以使用Vite构建了，Vite是由原生ES Module驱动的，利用浏览器原生ES Module支持来提供快速的开发体验，Vite在开发环境下无需打包项目，构建速度更快，开发效率更高。
1.2 构建流程
创建项目
l
npm create vue@latest选择配置项
l
根据需要选择需要配置的选项进入项目目录
l
cd 项目名称安装模块
l
npm install运行项目
l
npm run dev2. Vue3基于CLI构建项目
关于vue cli的安装需要在管理员权限下进行（以管理员身份运行cmd窗口）
2.1 介绍
Vue CLI是vue.js的标准开发工具，CLI是Command Line Interface的缩写
Vue CLI具有丰富的配置、插件、预设等功能
2.2 构建流程
全局安装Vue CLI脚手架
l
npm install -g @vue/cli创建项目（项目名称全小写）
l
vue create 项目名称选择配置项
l
根据需要选择需要配置的选项进入项目目录
l
cd 项目名称安装模块
l
npm install运行项目
l
npm run serve3. Vue2基于CLI构建项目（拓展）
关于vue cli的安装需要在管理员权限下进行（以管理员身份运行cmd窗口）
当然，如果你还想用Vue2的脚手架来创建项目，也可以，以下是Vue2的脚手架创建
3.1 介绍
Vue CLI是vue.js的标准开发工具，CLI是Command Line Interface的缩写
Vue CLI具有丰富的配置、插件、预设等功能
3.2 构建流程
全局安装Vue CLI
l
npm install -g vue-cli创建项目（项目名称全小写）
l
vue init webpack 项目名称选择配置项
l
根据需要选择需要配置的选项进入项目目录
l
cd 项目名称运行项目
l
npm run dev4. Vite和Vue CLI构建方式的区别
Vite和Vue CLI构建项目的区别
Vite：服务启动极快3（开发环境下无需打包）、配置简洁（简洁的vite.config.js配置）、原生ES Module支持（浏览器原生ES Module加载模块）
Vue CLI：丰富的插件与预设（提供大量官方和社区插件，可集成各种工具和库）、详细的配置（通过vue.config.js文件继续详细配置）、热重载（支持热模块替换即HMR，提高开发效率）
5. 推荐使用方式
推荐使用vite，虽然原有的Vue CLI更为成熟，也更易上手，但Vite的性能更强大，也在不断完善，个人觉得应该会成为主流。
仅为个人观点，仅供参考。
感谢阅读，祝君暴富！