搭建vue3项目

news/2024/5/19 23:33:07/文章来源:https://blog.csdn.net/weixin_44410921/article/details/126624885

搭建vue3项目

    • 搭建准备
    • 创建项目
    • 选择所需配置
    • 运行项目

vue3已经被大众所熟悉,很多公司都在做vue2到vue3的升级。
介绍vue3项目的搭建过程

搭建准备

  • 前端开发环境需要node.js&npm
    node下载地址:http://nodejs.cn/download/
    根据自己电脑环境下载就行
    在这里插入图片描述

  • 安装vue-cli3 ,使用vue-cli3脚手架构建项目。

     npm install -g @vue/cli
    

创建项目

vue create [项目名称]

在这里插入图片描述

fehelper ([Vue 3] less, babel, typescript, router, vuex, eslint)
这个是之前搭建过vue3的项目,这时候可以引用
Default ([Vue 2] babel, eslint) : 默认安装vue2
Default (Vue 3) ([Vue 3] babel, eslint): 默认安装vue3
Manually select features: 自定义安装

建议自定义安装,如果只搭建vue2或者vue3的话,之后的项目中,就需要自己去安装和配置所需要的vue-router以及css-loader之类的。

选择所需配置

选择自定义配置后,根据提示进行配置。根据自己 项目需要按空格选择。
在这里插入图片描述

Choose Vue version(选择VUE版本)
Babel(JavaScript 编译器,可将代码转换为向后兼容)
TypeScript(编程语言,大型项目建议使用)
Progressive Web App (PWA) Support-APP使用
Router(路由)
Vuex(Vuex)
CSS Pre-processors(css预处理)
Linter / Formatter(代码风格/格式化)
Unit Testing(单元测试)
E2E Testing(e2e测试)

搭建vue3项目,所以选择vue3.x
在这里插入图片描述

是否使用router
在这里插入图片描述
选择css方式
在这里插入图片描述

选择sass/scss就选择node-sass

选择ESLint套餐

Lint on save 保存后检测
Lint and fix on commit commit时检测

在这里插入图片描述
选择第一个之后
在这里插入图片描述

是否保存为默认配置(如果选择yes需要自己起个默认名)
保存了之后,下次创建项目就可以引用

在这里插入图片描述

选择完就开始构建了

在这里插入图片描述
在这里插入图片描述

到这就构建成功了
根据提示,选择文件夹,再运行就行

 $ cd test$ npm run serve

运行项目

构建完成之后,打开文件
在这里插入图片描述

目录介绍
node_modules(npm 加载的项目依赖模块)
public(公共资源)
src(开发目录)
assets(图片等文件)
components(组件)
router(路由)
store(vuex)
views(页面)
App.vue(核心页)
main.js(核心文件)
.browserslistrc(这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置)
.eslintrc.js(ESlint配置文件)
.gitignore(git配置文件)
babel.config.js(babel配置文件)
package-lock.json(依赖版本锁定)
package.json(项目信息及依赖信息)
README.md(项目介绍)

在这里插入图片描述
运行成功

在这里插入图片描述

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

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

相关文章

2022/08/31 day14:企业级解决方案

文章目录目录缓存预热缓存雪崩缓存击穿缓存穿透性能指标监控总结目录 面试问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtBtkGNE-1661933471760)(en-resource://database/5507:1)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下…

抖音小程序模板全行业整理合集,抖音小程序制作平台分享

小弟我是来自第三方抖音小程序制作平台的打工人,给大家整合了一些我们平台的抖音小程序模板,大家可以根据需要来获取。 步骤就是点击下方的链接,选好自己的抖音小程序模板,在平台注册账号直接套用到自己的抖音小程序上&#xff0…

深入理解蓝牙BLE之“信道管理”

目录 一.BLE的调制解调: 二.BLE的信道: 三.BLE的广播信道: 四.BLE的数据信道: 五.BLE信道管理: 5.1广播信道的随机延时: 5.2数据信道的调频算法: 跳频算法1: 跳频算法2&…

02.Haoop 虚拟机 桥接与NAT之间区别 及桥接设置

首先说 我的硬件准备,1台windows系统,1台mac pro 。 在 物理机上使用了 VMWARE CENTOS 7 的 方式进行配置。 那么我希望能实现把 这2台机器连在一起,做Hadoop 的集群。 网络问题是首先需要解决的事情,主要不通物理主机之间一直…

02:入门及安装(狂神说RabbitMQ)

RabbitMQ入门及安装 https://www.bilibili.com/video/BV1dX4y1V73Gp27 概述 简单概述: RabbitMQ是一个开源的遵循 AMQP协议实现的基于 Erlang语言编写,支持多种客户端(语言),用于在分布式系统中存储消息&#xff0…

Spring Security 入门之自定义表单登录开发实现(三)

文章目录1. 前言2. 自定义认证2.1 自定义登录页面2.2 后端认证逻辑3. 自定义登陆成功处理3.1 登陆成功原理3.2 自定义登陆成功响应处理4. 自定义登陆失败处理4.1 登陆失败原理4.2 自定义登陆失败响应处理5. 注销用户处理5.1 注销原理总结1. 前言 在弄懂HelloWorld案例后&#…

Node.js | 使用内置模块 event 实现发布订阅模式

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 蓝桥杯真题解析:蓝桥杯Web国赛真题解析 🧧 加入社区领红包:海底烧烤店ai(从前端到全栈) 🧑‍💼个人简介&#xff…

自动化测试中的验证码问题

做自动化测试的同学在面试的时候经常会遇到这问题,而且我们在实际的工作中也会遇到这个问题,那么这问题到底该怎么处理? 下面给出了面试过程中常见的相关面试题供大家参考: 01 在做自动化登陆的同时,如何绕过验证码&a…

windows下安装docker

下载docker,通过Redirecting…这个下载docker 正在上传…重新上传取消 下载完安装 安装完成后,进入powershell,输入命令docker network ls,查看docker网络,如果没有bridge项目,创建容器会报错(Windows容器就是两…

3D格式转换神器HOOPS Exchange使用教程(一):打印组件结构

HOOPS Exchange是什么? HOOPS Exchange 是一组软件库,可以帮助开发人员在开发应用程序时读取和写入主流的 2D 和 3D 格式。HOOPS Exchange 支持在主流的3D 文件格式中读取 CAD 数据,并支持将 3D 数据转换为 PRC 数据格式,这是一种…

NGINX源码之:event与epoll

在进入正题之前,先来大概了解下epoll: 引入多路复用之前socket建立连接流程: 1、服务端先建立socket(serversocket)占用一个文件描述符fd,然后bind端口,开启监听listen accept事件; 2、客户端请…

有趣的前端项目——一个暴躁萌的大眼仔

有趣的前端项目——一个暴躁萌的大眼仔 众所周知,我是一个摆子前端(真的 ),闲来无事,网上冲浪 遇见了如此蠢萌的大眼 于是我,行也思,坐也思,可算把这个大眼给复刻出来了。 原文出…

01-Flink概述

1. 源起和设计理念https://flink.apache.org/在 Flink 官网主页的顶部可以看到,项目的核心目标,是“数据流上的有状态计算”(Stateful Computations over Data Streams)。 具体定位是:Apache Flink 是一个框架和分布式处理引擎,如下图所示,用于对无界和有界数据流进行有…

利用逻辑分析仪处理CAN协议数据

1.设置逻辑分析仪 设置合适的采样频率和软件定义的波特率500K 2.数据分析 实测SOF的宽度是2us,因此可计算出波特率为500K,与实际程序设置的速率一致。 取图中的一部分数据分析,从左往右看: 0|| 000 0[1]001 0010 0|| 000 1000 …

《RO 仙境传说》Game Jam 游戏创作大赛

浪漫奇幻 MMORPG《RO 仙境传说》迎接 20 周年的到来,同时展开在 The Sandbox 元宇宙的旅程。冒险家们,是时候创建你的 RO 元宇宙新世代! 游戏创作大赛 (Game Jam) 在 The Sandbox 中制作最有代表性的《RO》内容,同时重温 RO 20 年…

使用谷歌浏览器 devtools 调试node项目

使用谷歌浏览器 devtools 调试node项目 当我们写node项目时,可以通过谷歌浏览器自带的devtools帮助我们debug我们的node项目 1.启动调试命令 nodemon --inspect app.js如上图所示,当出现Debugger… 字样时即说明启动成功! 2.在谷歌浏览器…

中国精炼铜行业发展监测及投资战略研究报告

精炼铜行业相关公司:江西铜业(600362)、铜陵有色(000630)、云南铜业(000878)、西部矿业(601168)、紫金矿业(601899)、海亮股份(002203)等 本文核心数据:全球精铜产销规模、全球精铜产销区域分布等。 从铜冶炼工艺来看,目前生产铜主要有两种方式。一种是…

Java线程池参数动态化实践

为什么需要线程池参数动态化? 日常业务开发中,线程池参数是很难计算准确的,往往需要在实践中不断的调整才能得到一个较为合理的取值。在取值不是那么明确之前,每次修改参数都需要重新部署服务才能生效,这显然不是一个…

艺术收藏NFT系统开发:NFT功能搭建

NFT数字藏品是种特殊的基于区块链的代币,可以用来证明数字物品的所有权,如艺术、音乐、礼物地图或游戏中的稀有物品。区块链技术赋予每一个数字作品一个独一无二的识别码,使相对应具体的作品、艺术品产生独一无二的数字凭证。 在传统艺术品收…

1.4_8 Axure RP 9 for mac 高保真原型图 - 案例7 【旋转的唱片5】进度条计时器 关联

一、成品效果 Axure Cloud 案例6 -【旋转的唱片5】进度条&计时器 关联 新增功能点:1.进度条与计时器关联 二、素材准备 需要先依次完成:     案例2 【旋转的唱片】、     案例4 【旋转的唱片2】计时器、     案例5 【旋转的唱片3】进度…