当前位置: 首页 > news >正文

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)

 

http://www.gsyq.cn/news/18667.html

相关文章:

  • C# 使用WebView2加载本地资源
  • 从零开始部署Android环境的Jenkins CI/CD流水线(docker环境,Win强大的系统)
  • 集群、分布式、微服务
  • 改了 Nacos 一行配置,搞崩线上支付系统!
  • Gitee Insight领跑DevSecOps赛道:2025研发效能工具全景评测
  • Vue3 集成 VueRouter
  • 2025 最新球墨铸铁管件厂商推荐排行榜权威发布,市政 / 给排水 / 消防用管件优选品牌深度解析
  • CH585在MACOS系统中协商BLE连接间隔至7.5ms
  • FastCopy复制软件绿色版下载!一款快速复制软件!方便实用
  • CopyOnWriteArrayList 的故事--一起看看java原生的读写分离
  • 详细介绍:深入解析 List 容器组件:构建高效、可交互的列表解决方案
  • 2025年开发者必看:本土化代码管理平台Gitee如何助力中国开发者高效协作
  • C. awoos Favorite Problem
  • 2025 年过滤机厂家最新推荐排行榜:胶带式 / 盘式真空 / 脱水 / 带式真空 / 水平带式过滤机企业权威选购指南
  • 2025 年最新推荐灭火器维修公司榜单:覆盖干粉 / 水基 / 二氧化碳 / 七氟丙烷 / 锂电池灭火器维修,帮您选到专业可靠服务单位
  • scrapy-redis项目:爬取某网站图书信息 - 实践
  • 深入解析:考研复习-线性代数-第二章-矩阵
  • 2025 年最新推荐!空压机租赁公司综合实力榜单:涵盖无油 / 高压 / 阿特拉斯等机型及二手买卖置换回收,助力企业精准选靠谱服务商
  • 2025 年报警器厂家最新推荐权威榜单:海湾 / 青鸟 / 利达等品牌全覆盖,详解优质服务商助力安全选购NB烟感/松江烟感/三江烟感/燃气报警器厂家推荐
  • JavaScript性能优化实战大纲 - 指南
  • 2025 年国内包装袋厂家最新推荐排行榜:聚焦绿色环保与定制化,精选优质企业助力采购决策无纺布/降解/塑料/复合/可定制化包装袋厂家推荐
  • 快排模板1(lomuto分区)
  • 标签的关系,注释,标题标签和段落标签,文本格式化标签
  • 网络编程实践笔记_1_阿贝云_免费云服务器_简单GET_POST实现
  • 注解@RequestParam与@RequestBody的使用场景
  • 博客导航
  • MP4和WMV2压缩机制对比 - 详解
  • 2025 年餐饮一次性用品实力厂家最新推荐榜单:资质完备、口碑卓越的标杆企业权威甄选餐饮一次性牙签/牙线/筷子套/杯盖用品厂家推荐
  • 2025 年金属线槽厂家最新推荐排行榜:涵盖不锈钢 / 铝合金 / 防火 / 大跨距 / 喷塑类型,助您精准选优质厂家企业
  • 金蝶KIS行政事业版v11.0免费补丁/行政事业版11破解版