Vue 创建项目的几种方式

截止目前有5种方式创建vue项目

  1. vue init webpack 项目名称
  2. vue create 项目名称
  3. vue ui
  4. npm init vue@latest
  5. 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)

 

posted @ 2025-10-11 10:57  风起南岸  阅读(84)  评论(0)    收藏  举报