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

Vue CLI 3 项目构建

Vue CLI 是一个功能强大、易于使用的工具,可以极大地简化 Vue.js 应用的开发过程。通过快速创建项目、灵活的插件系统和丰富的配置选项,开发者可以更专注于业务逻辑,而不是底层配置。无论是新手还是经验丰富的开发者,Vue CLI 都是一个值得推荐的开发工具。接下来我们开始从零开始搭建Vue CLI 3 项目。

依赖工具

在构建一个 Vue 项目前,我们先要确保你本地安装了 Node 环境以及包管理工具 npm,打开终端运行:

# 查看 node 版本
node -v# 查看 npm 版本
npm -v

如果成功打印出版本号,说明你本地具备了 node 的运行环境,我们可以使用 npm 来安装管理项目的依赖,而如果没有或报错,则你需要去 node 官网进行 node 的下载及安装。

脚手架

当我们安装完 node 后便可以开始进行后续的构建工作了,那么这里我主要给大家介绍下最便捷的脚手架构建。

1. 什么是脚手架

很多人可能经常会听到“脚手架”三个字,无论是前端还是后台,其实它在生活中的含义是为了保证各施工过程顺利进行而搭设的工作平台。因此作为一个工作平台,前端的脚手架可以理解为能够帮助我们快速构建前端项目的一个工具或平台。

2. vue-cli

其实说到脚手架,目前很多主流的前端框架都提供了各自官方的脚手架工具,以帮助开发者快速构建起自己的项目,比如 VueReact 等,这里我们就来介绍下 Vue 的脚手架工具 vue-cli

vue-cli 经历了几个版本的迭代,目前最新的版本是 3.x,以下为构建流程:

a. 安装

我们可以在终端通过以下命令全局安装 vue-cli:

# 安装 Vue CLI 3.x
npm i -g @vue/cli

如果你习惯使用 yarn,你也可以:

# 没有全局安装yarn需执行此命令
npm i -g yarn
yarn global add @vue/cli

b. 构建

安装完 vue-cli 后,我们在你想要创建的项目目录地址下执行构建命令:

# my-project 是你的项目名称
vue create my-project

如果你只想构建一个基础的 Vue 项目,那么使用 BabelRouterVuexCSS Pre-processors 就足够了,最后选择你喜欢的包管理工具 npm or yarn,感兴趣了解更多的读者可以前往官网查阅。

c. 启动

等待构建完成后你便可以运行命令来启动你的 Vue 项目:

# 打开项目目录
cd vue-project# 启动项目
yarn serve# or
npm run serve

需要注意的是如果启动的时候出现报错或者包丢失等情况,最好将 node 或者 yarn (如果使用)的版本更新到最新重新构建。

成功后打开浏览器地址:http://localhost:8080/ 可以看到如下界面:

d. 目录结构

最后脚手架生成的目录结构如下:

├── node_modules     # 项目依赖包目录
├── public
│   ├── favicon.ico  # ico图标
│   └── index.html   # 首页模板
├── src 
│   ├── assets       # 样式图片目录
│   ├── components   # 组件目录
│   ├── views        # 页面目录
│   ├── App.vue      # 父组件
│   ├── main.js      # 入口文件
│   ├── router.js    # 路由配置文件
│   └── store.js     # vuex状态管理文件
├── .gitignore       # git忽略文件
├── .postcssrc.js    # postcss配置文件
├── babel.config.js  # babel配置文件
├── package.json     # 包管理文件
└── yarn.lock        # yarn依赖信息文件

3. 可视化界面

当然,除了使用上述命令行构建外,vue-cli 3.x 还提供了可视化的操作界面,在项目目录下我们运行如下命令开启图形化界面:

vue ui

之后浏览器会自动打开本地 `8000` 端口,页面如下:

相关文章:

Vue CLI 3 项目构建

Vue CLI 是一个功能强大、易于使用的工具,可以极大地简化 Vue.js 应用的开发过程。通过快速创建项目、灵活的插件系统和丰富的配置选项,开发者可以更专注于业务逻辑,而不是底层配置。无论是新手还是经验丰富的开发者,Vue CLI 都是…...

1114 Family Property (25)

This time, you are supposed to help us collect the data for family-owned property. Given each persons family members, and the estate(房产)info under his/her own name, we need to know the size of each family, and the average area and n…...

详细介绍Sd-WebUI提示词的语法规则

AI绘画中最大的门槛就是提示词,对英语水平、文学水平、想象力、灵感等要求较高。不能每次一输入正向提示词(positive prompt),就只会写a girl, big eyes, red hair。虽然sd-webui软件可以直接翻译,输入一个子母后会立刻…...

document.body为null问题

调用document.body.append方法出现null的问题&#xff0c;一看就是放在了head中&#xff0c;一种方案是放在最后面&#xff0c;要不就和jquery一样监听&#xff0c;下面是代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8…...

2024国赛A问题5

问题五 龙头最大速度优化模型的建立 问题五在问题四的曲线的基础上对速度进行了约束&#xff0c;即在逐步改变龙头速度的情况下&#xff0c;各个龙身的速度也会依次改变&#xff0c;给出龙头的最大行进速度,使得舞龙队各把手的速度均不超过 2 m/s。即可依此构建一个龙头速度的…...

Kalilinux下MySQL的安装

MySQL是一个广泛使用的开源关系型数据库管理系统&#xff0c;它是最流行的关系型数据库之一。在Kalilinux下安装MySQL可以为我们提供方便的数据库管理和开发环境。本文将介绍如何在Kalilinux中安装MySQL&#xff0c;并提供一些常用的代码示例。 步骤一&#xff1a;更新软件包 …...

文件路径与Resource接口详解

目录 第一章、快速了解文件路径1.1&#xff09;什么是文件路径&#xff1f;1.1.1&#xff09;绝对路径1.1.2&#xff09;相对路径 1.2&#xff09;重要&#xff1a;相对路径的表示方法1.2.1) ./ 与 ../ 1.3&#xff09;文件路径与环境变量1.3.1&#xff09;什么是环境变量1.3.2…...

极狐GitLab 17.7正式发布,可从 GitLab 丝滑迁移至极狐GitLab【二】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 官网极狐…...

分布式光纤传感|分布式光纤测温|线型光纤感温火灾探测器DTS|DTS|DAS|BOTDA的行业16年的总结【2024年】

背景&#xff1a; 从2008年&#xff0c;从事分布式光纤传感行业已经过了16年时间了&#xff0c;依稀记得2008年&#xff0c;看的第一遍论文就是中国计量大学张在宣老爷子的分布式光纤测温综述&#xff0c;我的经历算是行业内极少数最丰富的之一。混过学术圈&#xff1a; 发表…...

存储过程实现多个分类不同计算规则得到对应的分类、月份和款号

该存储过程 PRO_MON_MDCODE 实现多个分类不同计算规则得到对应的分类、月份和款号,其中线下分类的款最早出现时间会在20230101,最晚是当前月份后12月,电商的款取商品维表的23,24,25年商品年份的A款,其他业务分类逻辑(A-线上,B电商公司,C品牌公司)的款最早出现时间会在2…...

aj-report本地前后端分离部署运行

github项目地址 aj-report-mine 在源代码v1.4版本基础上&#xff0c;本地进行前后端分离部署开发 这里我是进行了整合&#xff0c;把自己在拉取源代码到成功运行过程中的一些东西直接整合&#xff0c;根据下面的步骤即可成功运行 资源获取 夸克网盘(16-github-aj-report-re…...

CSS 过渡动画效果

在 CSS 中&#xff0c;transition 是用来实现元素属性平滑过渡的一个属性。通过 transition&#xff0c;你可以指定当元素的状态发生变化时&#xff0c;如何在一定时间内平滑地过渡到新的样式&#xff0c;而不是立即跳变。 使用于侧边栏展开和收起了&#xff0c;左侧区域的自适…...

网络安全 - DOS

1.1.1 摘要 最近网络安全成了一个焦点&#xff0c;除了国内明文密码的安全事件&#xff0c;还有一件事是影响比较大的——Hash Collision DoS&#xff08;通过Hash碰撞进行的拒绝式服务攻击&#xff09;&#xff0c;有恶意的人会通过这个安全漏洞让你的服务器运行巨慢无比&…...

【强化学习】Stable-Baselines3学习笔记

【强化学习】Stable-Baselines3学习笔记 Stable-Baselines3是什么安装ExampleReinforcement Learning Tips and TricksVecEnv相关在stablebaselines中使用自定义环境 Stable-Baselines3是什么 Stable Baselines3&#xff08;简称SB3&#xff09;是一套基于PyTorch实现的强化学习…...

前端真实面试题自用

一、写在前面 笔者&#xff0c;经过计算机学硕考研的失败后&#xff0c;想谋求一份前端工作实在是太难了。一方面&#xff0c;确实曾经学习过的东西很久没有拾起&#xff0c;另一方面&#xff0c;对于前端面经还是记忆不深刻&#xff0c;特地写此贴记录笔者在真实前端面试中遇…...

vue3和springboot使用websocket通信

前端端口&#xff1a;9090 后端端口&#xff1a;8080 vue3 引入依赖&#xff1a; npm install sockjs-client stomp/stompjs vue页面 <template><div><h1>WebSocket 示例</h1><button click"sendMessage">发送消息</button>…...

JS 解构、数组扩展符和模板字符串的常见用法

文章目录 解构1. 对象解构2. 数组解构 数组扩展符模板字符串 解构 1. 对象解构 想把对象中的属性赋值给变量时, 需要一次一次的赋值&#xff0c;很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。 (1) 对象属性赋值变量的传统写法&…...

低代码开源项目Joget的研究——Joget7社区版安装部署

大纲 环境准备安装必要软件配置Java配置JAVA_HOME配置Java软链安装三方库 获取源码配置MySql数据库创建用户创建数据库导入初始数据 配置数据库连接配置sessionFactory编译下载tomcat启动下载aspectjweaver移动jw.war文件编写脚本运行 测试参考资料 Joget&#xff0c;作为一款开…...

Golang 为什么没有注解?

Go 的哲学是:“少就是多,显式优于隐式。”注解虽然方便,但会违背 Go 追求简洁和清晰的设计理念。 什么是注解?为什么看起来很实用? 注解的定义:注解是一种特殊的元信息,用于修饰代码(如类、方法、字段等),让程序或工具在运行时或编译时解析和处理这些信息。例如: …...

Visual Studio Code(VS Code)配置C/C++环境

一、Visual Studio Code安装 Visual Studio Code&#xff0c;下文中简称为VS Code的详细安装方法请参考VSCode安装教程&#xff08;超详细&#xff09;-CSDN博客 二、MinGW编译器下载与配置 1、MinGW介绍 MinGW(Minimalist GNU for Windows)是一款用于Windows 平台的轻…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...