如何使用webpack 或者vite创建Vue3项目?

如何使用webpack 或者vite创建Vue3项目?

目前vue3的势头比较火,所以学习vue3刻不容缓, 在学习中遇到了到底使用webpack还是用vite打包工具呢?这个就看大家自己项目的需求了,webpack插件更加丰富一些毕竟做了很久了比较完善,但是我个人是刚接触vite,速度上真的称绝了。优缺点不在这里过多的分析,下面就分享一下使用webpack和vite分别是如何创建vue3项目的。

一、Node环境安装

官方文档:http://nodejs.cn/

注意:安装版本必须大于12.0,建议直接安装最新的稳定版

二、全局安装Vue脚手架

安装方式:

npm install @vue/cli -g
#or
cnpm install @vue/cli -g
#or
yarn flobal add @vue/cli

官方文档:https://cli.vuejs.org/zh/guide/

⚠️ 如果你安装的是旧版本的vu e-cli, 需要提前卸载,

npm uninstall vue-cli -g 或 yarn global remove vue-cli, 

然后重新安装@vue/cli

版本查看: 目前 vue –version 目前4.x 以上版本支持创建Vue3项目

版本升级:

npm updata -g @vue/cli

#or
yarn globan upgrade --latest @vue/cli

创建项目

vue create project-name

三、通过 Vite 创建项目

官方文档: https://cn.vitejs.dev/

创建项目

npm init @vitejs/app 
#or
cnpm init @vitejs/app 
#or
yarn create @vitejs/app project-name

安装所需要的插件

# 安装项目生产依赖
yarn add vue-router@next vuex@next element-plus axios -S

#安装项目开发依赖
yarn add sass -D

以上就是两种方式下创建vue3项目,希望可以对刚刚接触的人有所帮助吧。

 

Vue3超火课程推荐

1、《 Vue3+ElementPlus+Koa2 全栈开发后台系统》 百度网盘

2、《 Vue3 系统入门与项目实战 完整版 》 百度网盘

3、《 Spring Boot + Vue3 前后端分离 实战wiki知识库系统 》 百度网盘

4、《 Vue3.0+TS打造企业级组件库 前端中高级开发者必修课》 完整无秘

需要多套可以联系客服微信: ITBOKE 领取优惠

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏