(1)使用vite创建
什么是vite(https://cn.vitejs.dev/guide/)
Vite(法语意为 "快速的",发音 /vit/
,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。
- vite是一个更加轻量(热更新速度快,打包构建速度快)的vue项目脚手架工具。
- 相对于vue-cli它默认安装的插件非常少,随着开发过程依赖增多,需要自己额外配置。
如何创建vue3项目
cmd打开终端,输入指令
npm init vite 项目名称
按enter键会弹出
create-vite
OK to proceed? Y/n (选y按enter键,这是第一次使用vite创建项目会弹出,不是第一次创建的不会弹出)
enter之后会弹出选择的框架,这里我们选择vue(上下键选择)
选择项目语言
项目创建成功
依次根据提示进入项目目录,随后安装依赖
最后运行项目
vite默认安装的插件非常少,还有一些其他需要自己额外配置。(router)
使用cnpm i vue-router 安装router,随后在main.js里进行配置
在src文件夹里创建router文件夹并且创建一个index.js文件,在index里配置路由
基本配置完成
(2)使用vue-cli创建
cmd打开终端,输入指令
vue create 项目名称
选择自定义选择安装预置
根据自己所需选择(空格选中,上下键挑选)
选中vue3项目
根据自己所需选择
选择less作为CSS预处理器
根据自己所需选择
创建成功
vue-cli与vite 优缺点
vue-cli
优点:经历过战斗考验,可靠、与 Vue 2 兼容、可以捆绑任何类型的依赖关系、插件生态系统、可以针对不同的目标进行构建
缺点:开发服务器速度与依赖数量成反比
vite
优点:开发服务器比 Webpack 快 10-100 倍、将 code-splitting 作为优先事项
只能针对现代浏览器(ES2015+)
缺点:与 CommonJS 模块不完全兼容、处于测试阶段,仅支持 Vue 3、最小的脚手架不包括 Vuex、路由器等、不同的开发服务器与构建工具