截止目前有5种方式创建vue项目
- vue init webpack 项目名称
- vue create 项目名称
- vue ui
- npm init vue@latest
- npm create vite@latest
环境准备:
1、安装node.js
方法4和5创建的项目是vue3项目,node版本需要升级到22.12+
2、安装脚手架工具
方法1、2、3使用【vue-cli】搭建 Vue 项目,需要安装 vue-cli 和 webpack、webpack-cli
方法4、5不需要此步骤,新的脚手架工具【create-vue】无需手动安装
1、全局安装脚手架 vue-cli
npm install -g vue-cli (vue-cli2,使用vue-cli2.x初始化项目安装这个)
npm install -g @vue/cli (vue-cli3,使用vue-cli3.x初始化项目安装这个)
2、检查是否安装成功:输出版本号说明安装成功
vue2:vue -V
vue3:vue --version
3、全局安装 webpack
npm install -g webpack
4、全局安装 webpack-cli
npm install -g webpack-cli
创建方式
方法1:vue init webpack 项目名(vue-cli2.x的初始化方式,官方不维护了,不推荐使用)
全局安装vue-cli:npm install -g vue/cli
方法2:vue create 项目名(vue-cli3.x的初始化方式)
全局安装vue-cli:npm install -g @vue/cli
直接创建vue项目:vue create 项目名
脚手架 vue-cli3.x 创建的 vue3 项目是基于 webpack 打包的。
vue cli底层用webpack搭建的,此种方式创建vue3适合新手过渡用
方法3:vue ui
可视化界面创建 vue 项目,其本质是使用vue-cli3.x;它可以创建vue2和vue3项目,但是如果要创建vue3项目推荐使用方法4和5,
方法4:npm create vue@latest
此方法创建的 vue3 项目是基于 Vite 打包的,此命令是使用了新vue脚手架工具【create-vue】
方法5:npm create vite@latest
vite是新型前端构建工具,使用查看文档:vite文档
脚手架
脚手架名称 | 适用框架 | 底层构建工具 | 特点 |
---|---|---|---|
create-vue | Vue 3 | Vite | 官方推荐,底层采用Vite,轻量快速 |
vue cli | Vue 2 | Webpack | 功能强大但较重,已不推荐使用 |
Vite | 通用(Vue/React/Svelte) | Vite | 通用(可搭配 Vue/React/Svelte) |