【前端 19】使用Vue-CLI脚手架构建Vue2项目

使用Vue CLI构建Vue 2项目

请添加图片描述

引言

Vue.js 是一个构建用户界面的渐进式JavaScript框架,以其轻量级和易用性受到前端开发者的广泛喜爱。Vue CLI(Vue Command Line Interface)是一个基于Vue.js进行快速开发的完整系统,提供了零配置的项目启动、开发调试、打包部署等功能。本文将详细介绍如何安装Vue CLI,并使用它构建一个Vue 2项目,同时解析Vue CLI构建出的项目目录结构。

安装Vue CLI

首先,确保你的开发环境中已经安装了Node.js和npm(Node.js的包管理器)。你可以通过运行node -vnpm -v来检查它们是否已安装及安装的版本。

接下来,打开你的终端或命令提示符,运行以下命令来全局安装Vue CLI:

npm install -g @vue/cli  
# 或者,如果你使用yarn作为包管理器  
yarn global add @vue/cli

安装完成后,你可以通过运行vue --version来验证Vue CLI是否正确安装。

使用Vue CLI创建Vue 2项目

Vue CLI默认会创建Vue 3项目。但是,你可以通过指定一个预设或手动选择特性来创建一个Vue 2项目。目前最直接的方式是使用Vue CLI 2.x版本或通过在Vue CLI 3/4中指定Vue 2的模板。但考虑到Vue CLI 3/4的广泛使用和灵活性,这里我们采用Vue CLI 3/4,并在创建项目时手动选择Vue 2版本。

运行以下命令来创建一个新的Vue项目:

vue create my-vue2-project

在创建过程中,你会被询问几个问题,包括是否使用预设(preset)还是手动选择特性(Manually select features)。选择“Manually select features”后,你可以取消选择“Vue 3 x”配置,确保项目是基于Vue 2的。

完成配置后,Vue CLI会创建并初始化你的项目。

当然,我们也可以使用图形化界面来创建 Vue2项目

通过命令先进入到图形化界面,然后再进行vue工程的创建

vue ui
Vue CLI项目目录结构

Vue CLI创建的项目具有一个清晰和标准的目录结构,这有助于你理解和组织项目代码。以下是一个典型Vue CLI(Vue 2)项目的基本目录结构:

my-vue2-project/  
│  
├── node_modules/             # 存放项目依赖的第三方模块  
│  
├── public/                   # 静态资源目录,如index.html  
│   ├── index.html            # 项目的入口HTML文件  
│  
├── src/                      # 项目的源代码目录  
│   ├── assets/               # 存放静态资源,如图片、字体等  
│   ├── components/           # 存放Vue组件  
│   ├── router/               # 存放Vue Router配置  
│   ├── store/                # 存放Vuex状态管理配置(如果项目中使用Vuex)  
│   ├── views/                # 存放页面级别的Vue组件  
│   ├── App.vue               # 主Vue组件  
│   ├── main.js               # Vue应用的入口文件  
│  
├── .env                      # 环境变量配置文件  
├── .env.local  
├── .env.[mode]               # 针对不同环境(如开发、生产)的环境变量配置文件  
├── .gitignore                # Git忽略文件  
├── babel.config.js           # Babel配置文件  
├── package.json              # 项目配置文件和依赖列表  
├── package-lock.json         # 锁定安装时的包的版本号  
├── README.md                 # 项目说明文件  
├── vue.config.js             # Vue CLI的配置文件(可选)  
│  
└── ...

对于初学者来说,我们只要知道:

  • node_modules/ 存储了项目依赖
  • src文件下是我们要写的代码
  • vue.config.js是vue-CLI的配置文件

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

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

相关文章

数据结构之线性表(顺序表的实现)

目录 一、线性表的原理 二、线性表的实现(顺序表) 1.定义顺序表 2.初始化顺序表 3.判断顺序表是否为空 4.获取顺序表的长度 5.向顺序表中插入元素 6.删除指定位置的元素 7.遍历顺序表 8.得到指定位置的元素 三、打印测试功能 1.测试 2.结果…

全球相机控制面板市场展望与未来增长机遇:预计未来六年年复合增长率CAGR为4.3%

在全球摄影器材和专业影像设备需求增长的背景下,相机控制面板正成为市场的焦点。本文详细分析了全球相机控制面板市场的现状、增长趋势及未来前景,旨在为投资者和业内人士提供深入的市场洞察和指导。 市场概览 据恒州诚思团队研究分析显示,2…

RK3568笔记四十七:PWM 子系统

若该文为原创文章,转载请注明原文出处。 pwm 子系统功能单一,很少单独使用,一般用于控制显示屏的背光、控制无源蜂鸣器、伺服电机、电压调节等等。 一、PWM介绍 PWM(Pulse width modulation),脉冲宽度调制。在内核中 PWM 驱动较简…

学习大数据DAY26 简单数据清洗练习和 Shell 脚本中的数据库编程

目录 上机练习 14 mysql 命令 sql 语句实现步骤 shell 脚本导入 csv 格式文件到 mysql 数据库 secure-file-priv 特性 把文件拷贝到 mysql 指定目录下 上机练习 15 mysqldump 命令 上机练习 16 上机练习 14 运用上一节课学的 Shell 工具完成 1. 清洗数据《infotest.t…

CentOS7 yum报错Cannot find a valid baseurl for repo

问题 Loaded plugins: fastestmirror Determining fastest mirrors Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infravag error was 14: curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown…

前端canvas——五子棋小游戏开发

这估计是最后一篇了,终于是修复了部分bug——隔一个空格能够胜利的bug,并且添加了部分样式。 其他bug目前还没有找到,找到再说吧。 大部分代码请见: 用canvas实现五子棋小游戏https://blog.csdn.net/m0_54066656/article/detail…

后端笔记(2)--JDBC

1.JDBC简介 *JDBC(Java DataBase Connectivity)就是使用java语言操作关系型数据库的一套API *JDBC本质:(可以使用同一套代码,操作不同的关系型数据库) ​ *官方定义的一套操作所有关系型数据库的规则,即接口 ​ *各…

ESP之经典蓝牙库BluetoothSerial介绍和实例演示

ESP之经典蓝牙库BluetoothSerial介绍和实例演示 1.概述 目前ESP32内置了双模蓝牙(蓝牙4.0版本之前都是经典蓝牙,4.0版本成为BLT低功耗蓝牙转为物联网开发。双模指的就是这款芯片两种模式都支持)。 这篇文章介绍ESP32蓝牙的经典模式使用方法…

算法学习day23

一、k个一组翻转链表 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表。 思路: 1.首先得到链表的长度size;然后在size>k的范围里面进行翻转长度为k的链表。 2.while(size>k) 在这个循环中&#xf…

【C++BFS算法】886. 可能的二分法

本文涉及的点 CBFS算法 LeetCod886. 可能的二分法 给定一组 n 人(编号为 1, 2, …, n), 我们想把每个人分进任意大小的两组。每个人都可能不喜欢其他人,那么他们不应该属于同一组。 给定整数 n 和数组 dislikes ,其…

电脑桌面记事本便签哪个好,有哪些好用的桌面备忘记事工具推荐

在寻找高效办公的道路上,我们经常需要记住许多重要的事情,然而人的记忆力终究有限,这时候就需要依赖一些工具来帮助我们进行提醒。一款好的电脑桌面记事本便签、桌面日程安排软件就像是一位得力助手,它不仅能够帮助我们合理规划时…

项目经理的开源工具指南:优化您的选择过程

国内外主流的10款开源项目管理系统对比:PingCode、Worktile、禅道、Teambition、Gogs、码云 Gitee、Jira、Redmine、ProjectLibre、OpenProject。 在选择合适的开源项目管理系统时,很多团队面临诸多挑战:功能是否全面?易用性如何&…

Excel模拟计算演示-以矩阵乘计算密度为例

Excel模拟计算演示-以矩阵乘计算密度为例 1.参考链接2.CUDA_Occupancy_Calculator截图3.矩阵乘计算密度模拟计算的操作步骤及效果 安装好CUDA之后,/usr/local/cuda-12.1/tools/CUDA_Occupancy_Calculator.xls里会看到"TABLE(,B17)"这样的表达式,原来是模拟计算的结果…

3V升5V输出800mA可驱动10MA驱动蜂鸣片芯片AH6910

135-3806-7573今天,我们将深入解析一款名为AH6910的芯片,这款芯片以其独特的3V至5V宽电压输入范围、800mA的高输出电流能力,以及能够轻松驱动低至10mA需求的蜂鸣片,成为了众多电子项目中的优选元件。######一、AH6910芯片概述 AH…

RIP路由协议

RIP-路由信息协议V1/V2/NG NG版为ipv6专用 距离矢量型IGP路由协议,使用跳数作为度量,支持等开销负载均衡;基于UDP,520端工作,基于UDP V1和V2的区别: 1、v1为有类别协议--不支持VLSM/CIDR,即使使…

ic进阶|性能篇02:一文带你了解一种特殊的并行技术-展开!

本期文章让我们聊聊一种数字ic设计技术——展开,展开用于产生一个一次迭代就相当于原有结构的多次迭代的新电路结构。其相当于之前聊过的折叠技术的反向操作,折叠使用一个功能单元通过多次迭代来完成原有电路结构一次迭代的操作,相对于通过时…

中电金信:云原生时代IT基础设施管理利器——基础设施即代码(IaC)

在数字化转型、零售业务快速发展、信创建设驱动下,应用架构、技术架构、基础架构都已向云原生快速演进,银行业IT基础设施管理产生了非常大的变化,当前银行业,正在开展新一轮的核心应用系统重构、基础平台统一建设等重点任务&#…

Playwright 的使用

Playwright 的特点 支持当前所有主流浏览器,包括 Chrome 和 Edge (基于 Chromiuns), Firefox , Safari 支持移动端页面测试,使用设备模拟技术,可以让我们在移动Web 浏览器中测试响应式的 Web 应用程序 支持所有浏览…

x264编解码库 -介绍和使用示例

目录 1:X264简单介绍 1.1:编译x264 1.2:x264简单介绍 1.3:x264的优势 1.4:x264与FFmpeg的关系 1.5:x264 编解码原理 1.6 进一步学习资源 2:demo效果 3:完整代码 4:附件…

6 网络

6 网络 1、概念2 IP地址3、套接字4、TCP协议4.1 TCP协议的基本特征4.2 建立连接4.4 终止连接4.5 编程模型 5、UDP协议5.1 UDP协议的基本特性5.2 常用函数5.3 UDP通信模型 6、域名解析 1、概念 计算机网络是实现资源共享和信息传递的计算机系统 ISO/OSI网络协议模型 TCP/IP协…