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

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

news 文章来源：https://blog.csdn.net/weixin_72979483/article/details/132613798 2025/5/15 1:22:52

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

MVC模式分层练习

新建库 新建表 插入点数据 先不用MVC模式写功能,来看下缺点是什么 新建一个空项目 选项项目使用的JDK 自己的IDEA总是要重启下 新建模块 因maven还没教 添加框架支持 添加后项目多了这些 添加些必要依赖 这里注意下,如果导入jar包不对可以重新导入下或者是jar包本身出了问…...

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

ORB-SLAM2算法12之单目初始化Initializer

文章目录 0 引言1 单目初始化Initializer1.1 构造函数1.2 成员函数1.2.1 Initialize1.2.2 FindHomography1.2.3 FindFundamental1.2.4 ReconstructH1.2.5 ReconstructF 2 总结 0 引言 ORB-SLAM2算法7详细了解了System主类和多线程、ORB-SLAM2学习笔记8详细了解了图像特征点提取…...

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

固定参数-以京东sign逆向为例

前言 在逆向过程中&#xff0c;需要结合frida或unidbg&#xff0c;对整个算法进行一步步的分析&#xff0c;有时候我们分析完某一部分&#xff0c;想要继续往下分析时&#xff0c;需要重新发起请求&#xff0c;这时候的参数往往都已经改变了&#xff0c;这样会打断我们的节奏&a…...

编程日记 2023/9/3 13:24:26

在macOS 上执行sed命令报错问题

错误描述 在macOS 上执行sed命令&#xff0c;报错 sed -i s/book/books/g demo.txt sed: 1: extra characters at the end of d command解决方法 原因是mac的和linux写法不一样 linux sed -i s/book/books/g demo.txtmac sed -i s/book/books/g demo.txt...

编程日记 2023/9/3 13:23:25

ARP欺骗

ARP协议&#xff1a; 地址解析协议&#xff0c;将IP地址转换为对应的mac地址&#xff0c;属链路层协议 ip地址&#xff1a; ip地址本义是为互联网上的每一个网络和每一台主机配置一个唯一的逻辑地址&#xff0c;它的格式表示为&#xff1a;&#xff08;A.B.C.D&#xff09;。其…...

编程日记 2023/9/3 13:22:22

pip切换下载源（多种国内源）

pip切换下载源 一、pip二、使用步骤1.查看源2.切换源 一、pip pip 是一个现代的&#xff0c;通用的 Python 包管理工具 二、使用步骤 1.查看源 使用以下命令查看当前pip的下载源 pip config list2.切换源 在国内使用官方下载依赖往往速度慢&#xff0c;易出错&#xff0c…...

编程日记 2023/9/3 13:21:21

ARM Cortex-M 的 SP

文章目录 1、栈2、栈操作3、Cortex-M中的栈4、MDK中的SP操作流程5、Micro-Lib的SP差别1. 使用 Micro-Lib2. 未使用 Micro-Lib 在嵌入式开发中&#xff0c;堆栈是一个很基础&#xff0c;同时也是非常重要的名词&#xff0c;堆栈可分为堆 (Heap) 和栈 (Stack) 。 栈(Stack): 一种…...

编程日记 2023/9/3 13:20:20

【原创】鲲鹏ARM构架openEuler操作系统安装Oracle 19c

作者:einyboy 【原创】鲲鹏ARM构架openEuler操作系统安装Oracle 19c | 云非云计算机科学、自然科学技术科谱http://www.nclound.com/index.php/2023/09/03/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E9%B2%B2%E9%B9%8Farm%E6%9E%84%E6%9E%B6openeuler%E6%93%8D%E4%BD%9C%E7%B3%BB%…...

编程日记 2023/9/3 13:19:18

k8s之存储篇---数据卷-挂载

挂载是指将定义在 Pod 中的数据卷关联到容器&#xff0c;同一个 Pod 中的同一个数据卷可以被挂载到该 Pod 中的多个容器上。 数据卷内子路径 有时候我们需要在同一个 Pod 的不同容器间共享数据卷。使用 volumeMounts.subPath 属性&#xff0c;可以使容器在挂载数据卷时指向数…...

编程日记 2023/9/3 13:18:17

无涯教程-JavaScript - TDIST函数

The TDIST function replaces the T.DIST.2T & T.DIST.RT functions in Excel 2010. 描述 该函数返回学生t分布的百分点(概率)​​,其中数值(x)是t的计算值,将为其计算百分点。 t分布用于小样本数据集的假设检验。使用此函数代替t分布的临界值表。 语法 TDIST(x,deg_fr…...

编程日记 2023/9/3 13:17:16