Vue项目的构建方式

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

兴酣落笔摇五岳，诗成笑傲凌沧洲。
功名富贵若长在，汉水亦应西北流。
——《江上吟》

文章目录

Vue项目的构建方式
- 1. Vue3基于Vite构建项目
- - 1.1 介绍
  - 1.2 构建流程
- 2. Vue3基于CLI构建项目
- - 2.1 介绍
  - 2.2 构建流程
- 3. Vue2基于CLI构建项目（拓展）
- - 3.1 介绍
  - 3.2 构建流程
- 4. Vite和Vue CLI构建方式的区别
- 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 构建流程

创建项目

npm create vue@latest

选择配置项

根据需要选择需要配置的选项

进入项目目录

cd 项目名称

安装模块

npm install

运行项目

npm run dev

2. Vue3基于CLI构建项目

关于vue cli的安装需要在管理员权限下进行（以管理员身份运行cmd窗口）

2.1 介绍

Vue CLI是vue.js的标准开发工具，CLI是Command Line Interface的缩写
Vue CLI具有丰富的配置、插件、预设等功能

2.2 构建流程

全局安装Vue CLI脚手架

npm install -g @vue/cli

创建项目（项目名称全小写）

vue create 项目名称

选择配置项

根据需要选择需要配置的选项

进入项目目录

cd 项目名称

安装模块

npm install

运行项目

npm run serve

3. Vue2基于CLI构建项目（拓展）

关于vue cli的安装需要在管理员权限下进行（以管理员身份运行cmd窗口）
当然，如果你还想用Vue2的脚手架来创建项目，也可以，以下是Vue2的脚手架创建

3.1 介绍

Vue CLI是vue.js的标准开发工具，CLI是Command Line Interface的缩写
Vue CLI具有丰富的配置、插件、预设等功能

3.2 构建流程

全局安装Vue CLI

npm install -g vue-cli

创建项目（项目名称全小写）

vue init webpack 项目名称

选择配置项

根据需要选择需要配置的选项

进入项目目录

cd 项目名称

运行项目

npm run dev

4. Vite和Vue CLI构建方式的区别

Vite和Vue CLI构建项目的区别

Vite：服务启动极快3（开发环境下无需打包）、配置简洁（简洁的vite.config.js配置）、原生ES Module支持（浏览器原生ES Module加载模块）
Vue CLI：丰富的插件与预设（提供大量官方和社区插件，可集成各种工具和库）、详细的配置（通过vue.config.js文件继续详细配置）、热重载（支持热模块替换即HMR，提高开发效率）