新建Vue工程的几种方法

（持续更新补充）

使用CLI2 : vue-cli

vue-cli是针对构建vue的脚手架CLI2，只能新建vue2工程。
全局安装vue-cli之后，构建vue2项目的格式为：
vue init 构建方式 project_name：比如以下5种构建方式

vue init webpack project
vue init webpack-simple project
vue init browerify project
vue init browerify-simple project
vue init simple project
1
2
3
4
5

其中，以选用webpack的构建方式较多，vue init webpack project
（项目名不要出现大写字母！）

构建过程：

构建结果：

使用CLI3 : @vue/cli

vue-cli是针对构建vue推出的脚手架CLI3，可以快捷构建vue2或者vue3的工程。
全局安装@vue/cli之后，构建vue项目的格式为：

vue create projectname
1

构建过程：

可选vue2 或者vue3的默认配置，也可以手动配置 。
一般我们选择手动配置，这样更加可以更符合我们的项目开发需求：
选用配置：

选择vue版本：

选择预处理器：

等等…最后你的这次配置可以保存，下次可以使用

最后，对于用CLI2和CLI3构建vue中可能报错的情况，可以参考我的另一篇博客：
Vue-cli新建工程以及报错处理

使用 vue@3构建 （内置Vite）

npm安装vue@3之后：

npm init vue@3
1

新建过程：

构建结果：

看package.json可以发现这正是用Vite构建的，这也是Vue3官方推荐的构建方式

直接使用Vite

下面是直接用Vite构建vue工程的方法：
需要node>18 ，且npm i vite安装之后

npm create vite 
1

构建过程：

构建结果：

Vite中可供选择的框架：

使用parcel (最少配置方案)

Parcel 对 Vue 支持是开箱即用的。
parcel官网：https://parceljs.org/