17-工程化开发 脚手架 Vue CLI
开发Vue的两种方式:
1.核心包传统开发模式: 基于 html/css /js 文件，直接引入核心包，开发 Vue。
2.工程化开发模式: 基于构建工具 (例如: webpack)的环境中开发 Vue。
问题:
1. webpack 配置不简单
2. 雷同的基础配置
3. 缺乏统一标准
需要一个工具,生成标准化的配置
工程化开发 & 脚手架 Vue CLI:
基本介绍:
Vue CLI 是 Vue 官方提供的一个全局命令工具.
可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。[集成了 webpack 配置]
好处:
1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化
使用步骤:
1.全局安装(一次): yarn global add @vue/cli 或 npm i @vue/cli -g
2.查看 Vue 版本: vue --version
3.创建项目架子: vue create project-name (项目名-不能用中文)-vue2
4.启动项目: yarn serve 或 npm run serve (找packagejson)
脚手架目录文件介绍 & 项目运行流程:
main.js组件:
// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.html// 1. 导入 Vue 核心包
import Vue from 'vue'// 2. 到入 App.vue 根组件
import App from './App.vue'// 提示: 当前处于什么环境 (生产 / 开发)
Vue.config.productionTip = false// 3. VUe实例化, 提供render方法 -> 基于App.vue创建结构渲染index.html
new Vue({// el: "#app", 作用: 和 $mount('选择器')作用一致,用于指定Vue所管理容器//render: h => h(App),render:(createElement) => {// 基于 App 创建元素结构return createElement(App)}
}).$mount('#app')
index.html组件:
<body><!-- 兼容: 给不支持js的浏览器一个提示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- Vue所管理的容器: 将来创建结构动态渲染这个容器 --><div id="app"><!-- 工程化开发模式中: 这里不在直接编写模板语法,通过 App.vue 提供结构渲染 --></div><!-- built files will be auto injected --></body>相关文章：
17-工程化开发 脚手架 Vue CLI
开发Vue的两种方式: 1.核心包传统开发模式: 基于 html/css /js 文件，直接引入核心包，开发 Vue。 2.工程化开发模式: 基于构建工具 (例如: webpack)的环境中开发 Vue。 问题: 1. webpack 配置不简单 2. 雷同的基础配置 3. 缺乏统…...
golang 分布式微服务DAO层构建
构建云原生项目的dao层 配置读写分离的mysql集群 1. 编写yml配置文件 搭建一主二从的mysql集群、单机redis db.yml mysql:source: # 主数据库driverName: mysqlhost: 127.0.0.1port: 3309database: db_tiktokusername: tiktokDBpassword: tiktokDBcharset: utf8mb4replica1…...
Java 项目日志实例：LogBack
点击下方关注我，然后右上角点击...“设为星标”，就能第一时间收到更新推送啦~~~ LogBack 和 Log4j 都是开源日记工具库，LogBack 是 Log4j 的改良版本，比 Log4j 拥有更多的特性，同时也带来很大性能提升。LogBack 官方建…...
什么是条件get方法？
条件GET方法通常指的是HTTP协议中的"GET"请求，但它带有一些条件，这些条件用于控制服务器是否应该返回请求的资源。这些条件通常使用HTTP标头字段来指定，以便客户端可以告诉服务器在某些条件下是否需要新的或更新的资源。 条件GET方…...
Python爬虫——scrapy_crawlspider读书网
创建crawlspider爬虫文件： scrapy genspider -t crawl 爬虫文件名 爬取的域名scrapy genspider -t crawl read https://www.dushu.com/book/1206.htmlLinkExtractor 链接提取器通过它，Spider可以知道从爬取的页面中提取出哪些链接，提取出的链…...
Spring源码编译-for mac
超详细的spring源码编译 记：编译成功时间：2023.08.19 环境准备： 1.idea 2023.1.1 Community Edition 2.jdk1.8 3.gradlegradle-5.6.4 4.spring源码(版本：spring-framework-v5.2.25.RELEASE) 一.spring源码下载 github 加速网站&…...
视频汇聚平台EasyCVR安防监控视频汇聚平台的FLV视频流在VLC中无法播放的问题解决方案
众所周知，TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入，包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等，以及厂家私有协议与SDK接入，包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上，视频监控…...
中间件：RocketMQ安装部署
单机部署 下载 cd /opt/soft/archive wget https://archive.apache.org/dist/rocketmq/4.9.4/rocketmq-all-4.9.4-bin-release.zip unzip -d ../ rocketmq-all-4.9.4-bin-release.zip配置 broker.conf 的brokerIP1 为公网ip 启动命令： nohup sh bin/mqnamesrv &a…...
leetcode-动态规划-42-接雨水
题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。 示例 1： 输入：height [0,1,0,2,1,0,1,3,2,1,2,1] 输出：6 解释：上面是由数组 [0,1,0,2,1,0,1,3,2,1…...
]浅议tcl语言)
[静态时序分析简明教程(十一)]浅议tcl语言
静态时序分析简明教程-浅议tcl语言 一、写在前面1.1 快速导航链接 二、Tcl基础知识三、Tcl的语言结构3.1 Tcl变量3.2 Tcl表达式与运算符3.3 Tcl的控制流语句3.3.1 列表遍历3.3.2 决策3.3.3 Tcl循环3.3.4 Tcl过程 3.4 其他Tcl命令3.4.1 open/close3.4.2 gets/puts3.4.3 catch3.4…...
大数据-玩转数据-Flink 网站UV统计
一、说明 在实际应用中，我们往往会关注，到底有多少不同的用户访问了网站，所以另外一个统计流量的重要指标是网站的独立访客数（Unique Visitor，UV）。 二、数据准备 package com.lyh.flink06;import lombo…...
3分钟了解下cwnd和TCP拥塞控制算法
文章首发地址 cwnd是什么？ cwnd是TCP拥塞控制中的一个重要概念，全称为“congestion window”，也被称为拥塞窗口。它用于限制发送方向网络发送数据的速度，以避免网络拥塞。cwnd是一个动态的值，可以根据网络状况动态调…...
设计模式之状态模式（State）的C++实现
1、状态模式的提出 在组件功能开发过程中，某些对象的状态经常面临变化，不同的状态，其对象的操作行为不同。比如根据状态写的if else条件情况，且这种条件变化是经常变化的，这样的代码不易维护。可以使用状态模式解决这…...
无涯教程-TensorFlow - Keras
Keras易于学习的高级Python库，可在TensorFlow框架上运行，它的重点是理解深度学习技术，如为神经网络创建层，以维护形状和数学细节的概念。框架的创建可以分为以下两种类型- 顺序API功能API 无涯教程将使用Jupyter Notebook执行和…...
使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地
本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook，并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件： jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…...
Keepalived+LVS部署高可用集群
文章目录 KeepalivedLVS(DR)部署高可用Web集群集群环境MASTER配置BACKUP配置检查Virtual IP是否漂移IPVS检查MASTERBACKUP Real Server配置附上个人写的小脚本 测试停用Real Server某一台的Apache服务停用Master上的keepalived检测Backup是否接管资源 KeepalivedLVS(DR)部署高可…...
2023河南萌新联赛第（五）场：郑州轻工业大学
A.买爱心气球 原题链接 : 登录—专业IT笔试面试备考平台_牛客网 博弈论 : #include <iostream> using namespace std; int t,n,m; string s1 "Alice",s2 "Bob"; int main() {cin>>t;while(t--){cin>>n>>m;if (n % 3 0) {cou…...
在Orangepi5开发板3588s使用opencv获取摄像头画面
先感谢香橙派群的管理员耐心指导，经过不断的调试修改最后成功通过opencv调用mipi摄像头获取画面 就记录分享一下大概步骤希望大家少踩点坑！！！！！！ 我用的固件系统是ubuntu2022.0.4 固件是&#x…...
音视频 ffmpeg命令分类查询
命令参数内容-version显示版本 -bsfs 显示可用比特流filter-buildconf显示编译配置-formats显示可用格式(muxersdemuxers)-muxers显示可用复用器-demuxers显示可用解复用器-codecs显示可用编解码器(decodersencoders)-decoders显示可用解码器-encoders显示可用编码器-bsfs显示可…...
VSCode无法从Extensions下载工具时，把工具下载到本地并添加到VSCode编辑器
从VSCode 的 Extensions 下载 下载报错：Error while installing ...... extension. Please check the log for more details. 由于内网限制（或者其他网络限制）无法正常下载扩展工具到VSCode编辑器，可以把工具下载到本地再添加到V…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术，通过密码学、共识机制和智能合约等核心组件，实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点：数据存储在网络中的多个节点（计算机），而非…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式，给定一个隐函数关系： F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标： 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...
小智AI+MCP
什么是小智AI和MCP 如果还不清楚的先看往期文章 手搓小智AI聊天机器人 MCP 深度解析：AI 的USB接口 如何使用小智MCP 1.刷支持mcp的小智固件 2.下载官方MCP的示例代码 Github：https://github.com/78/mcp-calculator 安这个步骤执行 其中MCP_ENDPOI…...