文章目录
- 使用CLI2 : vue-cli
- 使用CLI3 : @vue/cli
- 使用 vue@3构建 (内置Vite)
- 直接使用Vite
- 使用parcel (最少配置方案)
使用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
其中,以选用webpack的构建方式较多,vue init webpack project
(项目名不要出现大写字母!)
构建过程:
构建结果:
使用CLI3 : @vue/cli
vue-cli是针对构建vue推出的脚手架CLI3,可以快捷构建vue2或者vue3的工程。
全局安装@vue/cli之后,构建vue项目的格式为:
vue create projectname
构建过程:
可选vue2 或者vue3的默认配置,也可以手动配置 。
一般我们选择手动配置,这样更加可以更符合我们的项目开发需求:
选用配置:
选择vue版本:
选择预处理器:
等等…最后你的这次配置可以保存,下次可以使用
最后,对于用CLI2和CLI3构建vue中可能报错的情况,可以参考我的另一篇博客:
Vue-cli新建工程以及报错处理
使用 vue@3构建 (内置Vite)
npm安装vue@3之后:
npm init vue@3
新建过程:
构建结果:
看package.json可以发现这正是用Vite构建的,这也是Vue3官方推荐的构建方式
直接使用Vite
下面是直接用Vite构建vue工程的方法:
需要node>18 ,且npm i vite安装之后
npm create vite
构建过程:
构建结果:
Vite中可供选择的框架:
使用parcel (最少配置方案)
Parcel 对 Vue 支持是开箱即用的。
parcel官网:https://parceljs.org/