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

【vue2第八章】工程化开发和使用脚手架和文件结构

news 2026/2/10 20:47:15

vue工程化开发 & 使用脚手架VUE CLI：

1，核心包传统开发模式：基于js/html/css直接引入核心包开发vue。
2，工程化开发。基于构建工具如(webpack)的环境中开发vue。

vue cli是什么：

vue cli是一个vue官方提供的一个全局的命令工具.
可以帮助我们快速的创建一个开发vue项目的标准化基础架子【集成了webpack配置】

好处 ：

  1. 开箱即用，0配置。
  2. 内置babel等工具.
  3. 标准化.

使用步骤：

  1. 全局安装(一次)：yarn global add @vue/cli 或者使用npm npmi @vue/cli -g
  2. 查看vue的版本: vue --version
  3. 创建项目的架子：vue create project-name (项目名-不能用中文)
  4. 启动项目: varn serve 或 npm run serve (找package.json）

在这里插入图片描述
1.使用vscode打开需要创建项目的文件夹。或者打开指定文件夹，在打开命令窗口。
使用vue create project-name创建demo项目。
在这里插入图片描述
要使用vue3就可以选择创建vue3项目，我这里选的vue2.
然后这里需要等待一段时间。
在这里插入图片描述

然后cd到项目文件中。cd demo 使用 npm run serve 启动项目。
启动成功按住ctrl点击链接。
在这里插入图片描述

这样一个项目的基础框架就搭建成功。

这里启动项目时为什么命令时 npm run serve
这个启动名称实在 package.json里面配置的。

在这里插入图片描述
可以将这里面的serve改为其他的单词字母，然后使用 npm run 改过之后的单词也可以成功把项目运行起来。

项目的文件结构的各个用途：
使用npm安装的vue是没有yarn.lock文件
在这里插入图片描述
项目运行流程：
在这里插入图片描述

相关文章：

【vue2第八章】工程化开发和使用脚手架和文件结构

vue工程化开发 & 使用脚手架VUE CLI： 1，核心包传统开发模式：基于js/html/css直接引入核心包开发vue。 2，工程化开发。基于构建工具如(webpack)的环境中开发vue。 vue cli是什么： vue cli是一个vue官方提供的一个…...

编程日记 2023/9/3 13:46:55

建造者模式简介

概念： 建造者模式（Builder Pattern）是一种创建型设计模式，用于将复杂对象的构建过程与其表示分离。它允许您逐步构造一个复杂对象，同时保持灵活性和可读性。 特点： 将对象的构建过程封装在指导者类中&am…...

编程日记 2023/9/3 13:45:54

虚拟世界指南：从零开始，一步步教你安装、配置和使用VMware，镜像ISO文件！

本章目录 CentOS简介镜像下载一、新建虚拟机（自定义）1、进入主页，在主页中点击“创建新的虚拟机”2、点击创建虚拟机创建自己的虚拟机。可以选择自定义3、在“硬件兼容性(H)中选择：Workststion 15.x” ->下一步4、选择“稍后安…...

编程日记 2023/9/3 13:44:53

服务器卡顿怎么查找原因？

虽然服务器出现卡顿的现象比较少见，但也不排除出现的可能，而服务器一旦出现卡顿，造成的后果会严重的多。这里分享点笔记，希望有所帮助 1. 性能评估: 首先，对服务器的性能进行全面评估。检查 CPU 使用率、内存占用、磁…...

编程日记 2023/9/3 13:43:52

Pnpm,npm,yarn

npm 最初的npm只是简单的通过依赖去递归安装包，所以说每个依赖都会有自己的node_modules,node_modules是嵌套的。一个项目会存在多个包，多个包之间难免会有公共的依赖，node_modules嵌套的话，这样公共依赖就会下载多次。会造成磁盘…...

编程日记 2023/9/3 13:42:50

Kubernetes技术--使用kubeadm快速部署一个K8s集群

这里我们配置一个单master集群。(一个Master节点，多个Node节点) 1.硬件环境准备 一台或多台机器，操作系统 CentOS7.x-86_x64。这里我们使用安装了CentOS7的三台虚拟机 硬件配置：2GB或更多RAM，2个CPU或更多CPU，硬盘30GB或更多 2.主机名称和IP地址规划 3. 初始化准备工作…...

编程日记 2023/9/3 13:41:49

LeetCode 45题：跳跃游戏

题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - …...

编程日记 2023/9/3 13:40:48

idea中设置指定图片为项目站标

前提是准备好一张图片 在idea中创建imgs文件夹&#xff0c;放入图片 创建一个HTML文件 建立链接link标签&#xff0c;链接照片即可 <link href"../02css/imgs/2.jpg" rel"shortcut icon" type"image/x-icon"> 执行效果如下图所示&…...

编程日记 2023/9/3 13:39:45

【【萌新的STM32学习-27--USART异步通信配置步骤】】

萌新的STM32学习-27–USART异步通信配置步骤 USART/UART 异步通信配置步骤 1.配置串口工作参数 HAL_UART_Init() 我们会在此处调用MSP中的回调函数 2.串口底层初始化 用户定义HAL_UART_MspInit() 配置GPIO NVIC CLOCK 等 3.开启串口异步接收中断 HAL_UART_Receive_IT() 4.…...

编程日记 2023/9/3 13:38:44

elementplus实现左侧菜单栏收缩与展开

1.页面结构 Home.vue下包含aside.vue和menu.vue 2.TAside.vue el-menu左侧菜单栏显示 注意&#xff1a; 要使用收缩与展开&#xff0c;el-aside必须设置width"collapse"&#xff0c;否则收缩展开会出现收缩后&#xff0c;el-aside宽度不变窄需要使用动态改变展开收…...

编程日记 2023/9/3 13:37:43

VBA技术资料MF50：VBA_在Excel中突出显示前3个值

【分享成果&#xff0c;随喜正能量】人受到尊重&#xff0c;不是因为权钱&#xff0c;而是他骨子里透出的&#xff0c;正直与善良。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高…...

编程日记 2023/9/3 13:36:41

linux定时删除服务器日志

不说废话。直接进入操作流程 linux 定时任务是用的crontab 查看 crontab是否启动 service crond statusdead 死的 启动crontab service crond start 再次查看状态 running 运转的 查看 crontab cat /etc/crontab 查看 crontab任务 crontab -l 编辑 crontab任务 crontab …...

编程日记 2023/9/3 13:35:40

网络地址转换技术NAT(第九课)

一 什么是NAT？ NAT是网络地址转换的缩写，是一种在计算机网络中使用的技术，可以将私有地址转换为公共地址，从而实现本地网络与公共网络的互联。NAT工作在网络层，可以隐藏内部网络中的IP地址和端口号，从而增强网络的安全性和灵活性。在家庭网络、企业网络、公共WIFI热点等…...

编程日记 2023/9/3 13:34:39

K8s 在创建pod时api-server是先找scheduler 还是controller-manager

在K8s中&#xff0c;创建Pod时的流程如下&#xff1a; 用户通过Kubectl或其他方式向API Server发送创建Pod的请求。API Server接收到请求后&#xff0c;会先进行权限验证和身份认证。一旦验证通过&#xff0c;API Server会将请求转发给Scheduler组件。Scheduler负责对新创建的…...

编程日记 2023/9/3 13:33:38

【笔记】常用 js 函数

数组去重 Array.from(new Set()) 对象合并 Object.assign . 这里有个细节&#xff1a;当两个对象中含有key相同value不同时&#xff0c;会以 后面对象的key&#xff1a;value为准 保留小数点后几位 toFixed 注意&#xff1a; Number型&#xff0c;用该方法处理完&#xff0c;会…...

编程日记 2023/9/3 13:32:37

无涯教程-JavaScript - QUARTILE函数

QUARTILE函数取代了Excel 2010中的QUARTILE.INC函数。 描述 该函数返回数据集的四分位数。四分位数通常用于销售和调查数据中,以将人群分为几类。 语法 QUARTILE (array,quart)争论 Argument描述Required/OptionalArrayThe array or cell range of numeric values for whi…...

编程日记 2023/9/3 13:31:36

ES6新特性

let、const(es6)和var的区别 var&#xff1a;var声明变量存在作用域的提升&#xff0c;变量可以在未声明就调用。变量为undefined。 let: let声明变量是块级作用域&#xff0c;一个{}为一块&#xff0c;不存在作用域提升。只有声明变量后才能使用变量&#xff0c;否则会报错。…...

编程日记 2023/9/3 13:30:35

实现通用的表单清空重置功能

目录 第一版单个表单实现功能并一步步优化公共方法抽离 mixins 混入终版 form1 和 form2 组件实现 第一版单个表单实现功能并一步步优化 通过一步步代码的优化&#xff0c;实现清空重置功能&#xff0c;尽量做到抽离后&#xff0c;可以直接复用&#xff0c;不需要修改任何变量名…...

编程日记 2023/9/3 13:29:35

代码随想录 - Day31 - 回溯：组合问题

代码随想录 - Day31 - 回溯&#xff1a;组合问题 77. 组合 最容易想到的&#xff1a;k层for循环。 显然不能写那么多层for循环&#xff0c;所以该方法pass 使用回溯法&#xff1a; 用递归解决嵌套层数的问题 n相当于树的宽度&#xff0c;k相当于树的深度。 找到最深处的叶子节…...

编程日记 2023/9/3 13:28:33

git文件夹内容详解

.git文件夹是Git版本控制系统在项目根目录下创建的隐藏文件夹&#xff0c;包含了Git仓库的所有相关信息。如下是.git文件夹中常见的一些内容及其作用&#xff1a; HEAD&#xff1a;指向当前所在的分支&#xff08;或者是一个特定的提交&#xff09;。 branches&#xff1a;存储…...

编程日记 2023/9/3 13:27:32

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/2/9 6:48:28

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2026/1/25 13:18:12

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/31 13:13:32

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

编程新知 2026/2/4 19:29:38

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...

编程新知 2025/12/6 11:14:42

MySQL体系架构解析（三）：MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

编程新知 2026/1/23 12:07:06