新建Vue工程的几种方法

文章目录

  • 使用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
可选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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

03.C1W2.Sentiment Analysis with Naïve Bayes

目录 Probability and Bayes’ RuleIntroductionProbabilitiesProbability of the intersection Bayes’ RuleConditional ProbabilitiesBayes’ RuleQuiz: Bayes’ Rule Applied Nave Bayes IntroductionNave Bayes for Sentiment Analysis P ( w i ∣ c l a s s ) P(w_i|clas…

npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest

更换 npm 证书 问题描述报错原因更换步骤1 找到 nvm 安装目录2 发现证书过期3 更换新地址4 保存后,重新安装成功 问题描述 在使用 nvm 安装新版本时,未成功,出现报错: Could not retrieve https://npm.taobao.org/mirrors/node/l…

【postgresql】表操作

创建表 (CREATE TABLE): CREATE TABLE table_name ( column1 data_type constraint,column2 data_type constraint,... ); 插入数据 (INSERT INTO): INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...); 查询数据 (SELECT): SELECT column1, c…

火山引擎数据飞轮实践:在电商场景中,如何建设全链路数据血缘?

数据作为新型生产要素,正支撑企业的数智化转型。但企业数字化建设也存在管理成本高、数据产品使用门槛高、数据资产价值不够的问题,其原因在于业务和数据之间没有形成双向良性驱动。 结合新时代企业数字化转型需求,火山引擎基于字节跳动十余…

IC烧录员-带着工程师的梦想远航!

如果说软件工程师是代码程序的创造者,那么IC烧录员就是把工程师们辛苦敲代码,日夜辛劳的成果烧录到芯片里面的实践者,是他们,让工程师们的梦想运用到实践中,是他们带着工程师的梦想远航,他们的薪酬或许没有…

第一节-k8s架构图

一个Deployment,可以由多个不同Node下的Pod组成,每个Pod又由多个Container组成。 区分Deployment是用Labels(key:value),区分Pod是用PodName,区分Container是用ContainerName。 一个Node可以包含多个不同Deployment中的pod&…

MySQL-作业1

一、数据库 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 二、创建表 1、创建一个名称为db_system的数据库 2、在该数据库下创建两张表,具体要求如下: 员工表 user …

米国政府呼吁抛弃 C 和 C++

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!! 很多观点认为C 或 C永远不可被…

聚鼎装饰画:装饰画生意现在做晚吗

在这个充满机遇与挑战的时代,涉足装饰画领域是否为时已晚?许多人心中或许有着这样的疑问。事实上,尽管市场上的竞争者众多,但正如“朝霞映满天,别样红”一般,每个行业的黄金时期都有所不同,关键在于我们能…

在线JSON可视化工具--改进

先前发布了JSON格式化可视化在线工具,提供图形化界面显示结构关系功能,并提供JSON快速格式化、JSON压缩、快捷复制、下载导出、对存在语法错误的地方能明确显示,而且还支持全屏,极大扩大视野区域。 在线JSON格式化可视化工具 但…

硅纪元AI应用推荐 | 国产创作引擎即梦AI助力创作者探索创作新境界

“硅纪元AI应用推荐”栏目,为您精选最新、最实用的人工智能应用,无论您是AI发烧友还是新手,都能在这里找到提升生活和工作的利器。与我们一起探索AI的无限可能,开启智慧新时代! 在人工智能快速发展的今天,各…

怎么还有人分不清路由器、交换机、光猫、WiFi……你真的都了解吗?

号主:老杨丨11年资深网络工程师,更多网工提升干货,请关注公众号:网络工程师俱乐部 下午好,我的网工朋友。 讲某个具体技术,说不定你头头是道,但关于路由器、交换机、光猫、WiFi的知识细节&…

自然语言处理领域介绍及其发展历史

自然语言处理领域介绍及其发展历史 1 NLP2 主要任务3 主要的方法1 基于规则的方法(1950-1980)2 基于统计的方法(传统的机器学习的方法)3 Connectionist approach(Neural networks) 1 NLP 自动的理解人类语…

新能源组合灶,一灶两用(电燃灶+电陶炉),电生明火,无需燃料

在科技日新月异的今天,厨房电器的创新不断为我们的生活带来便捷与惊喜。华火新能源电燃灶,以其独特的设计和卓越的性能,成为未来厨房的首选,为您打造全新的烹饪体验。 中国人的烹饪文化源远流长,讲究火候的掌控和明火烹…

PHP电商系统开发指南高级技巧

开发高级 php 电商系统所需的技巧包括:数据库优化:使用索引、规范化数据结构和缓存机制。性能优化:启用页面缓存、优化图像和使用 cdn。购物车管理:使用会话或数据库存储数据,实现实时更新和弃单恢复。支付集成&#x…

[vue3+js]实现3d旋转效果

1. 实现效果图&#xff1a; 2.实现代码&#xff1a; css: <style lang"scss" scoped>.bottomContainer{width: 1200px;height: 400px;display: flex;justify-content: center;position: relative;margin:200px auto;align-items: center;// background-image…

既美观又方便的后台框架谁需要?进来就对了。

一套既美观又方便的后台框架可以大大幅节约开发时间和成本。 我们来一起看看几个明朗大气的管理控制台页面。 本文档会持续更新 模板编号&#xff1a;翠花_001模板编号&#xff1a;翠花_002模板编号&#xff1a;翠花_003

nginx的匹配及重定向

一、nginx的匹配&#xff1a; nginx中location的优先级和匹配方式&#xff1a; 1.精确匹配&#xff1a;location / 对字符串进行完全匹配&#xff0c;必须完全符合 2.正则匹配&#xff1a;location ^~ ^~ 前缀匹配&#xff0c;以什么为开头 ~区分大小写的匹配 ~* 不区分…

IDEA:插件和配置推荐(2024版)

文章目录 一、插件1.1 主题1.2 代码缩略图1.3 Maven插件2.4 彩虹括号2.5 翻译插件2.6 图标插件2.7 MyBatis插件2.8 阿里巴巴开发规范 二、全局配置2.1 主题2.2 字符编码2.3 注释颜色2.4 自动导包2.5 鼠标控制界面大小 三、新项目设置3.1 Maven3.2 SDK 四、恢复初始化 一、插件 …