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

17-工程化开发 脚手架 Vue CLI

news 2025/12/20 18:16:43

开发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 文件&#xff0c;直接引入核心包&#xff0c;开发 Vue。 2.工程化开发模式: 基于构建工具 (例如: webpack)的环境中开发 Vue。 问题: 1. webpack 配置不简单 2. 雷同的基础配置 3. 缺乏统…...

编程日记 2023/8/20 13:48:25

golang 分布式微服务DAO层构建

构建云原生项目的dao层 配置读写分离的mysql集群 1. 编写yml配置文件 搭建一主二从的mysql集群、单机redis db.yml mysql:source: # 主数据库driverName: mysqlhost: 127.0.0.1port: 3309database: db_tiktokusername: tiktokDBpassword: tiktokDBcharset: utf8mb4replica1…...

编程日记 2023/8/20 13:47:24

Java 项目日志实例：LogBack

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ LogBack 和 Log4j 都是开源日记工具库&#xff0c;LogBack 是 Log4j 的改良版本&#xff0c;比 Log4j 拥有更多的特性&#xff0c;同时也带来很大性能提升。LogBack 官方建…...

编程日记 2023/8/20 13:46:22

什么是条件get方法？

条件GET方法通常指的是HTTP协议中的"GET"请求&#xff0c;但它带有一些条件&#xff0c;这些条件用于控制服务器是否应该返回请求的资源。这些条件通常使用HTTP标头字段来指定&#xff0c;以便客户端可以告诉服务器在某些条件下是否需要新的或更新的资源。 条件GET方…...

编程日记 2023/8/20 13:45:20

Python爬虫——scrapy_crawlspider读书网

创建crawlspider爬虫文件&#xff1a; scrapy genspider -t crawl 爬虫文件名 爬取的域名scrapy genspider -t crawl read https://www.dushu.com/book/1206.htmlLinkExtractor 链接提取器通过它&#xff0c;Spider可以知道从爬取的页面中提取出哪些链接&#xff0c;提取出的链…...

编程日记 2023/8/20 13:44:19

Spring源码编译-for mac

超详细的spring源码编译 记&#xff1a;编译成功时间&#xff1a;2023.08.19 环境准备&#xff1a; 1.idea 2023.1.1 Community Edition 2.jdk1.8 3.gradlegradle-5.6.4 4.spring源码(版本&#xff1a;spring-framework-v5.2.25.RELEASE) 一.spring源码下载 github 加速网站&…...

编程日记 2023/8/20 13:43:17

视频汇聚平台EasyCVR安防监控视频汇聚平台的FLV视频流在VLC中无法播放的问题解决方案

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上&#xff0c;视频监控…...

编程日记 2023/8/20 13:42:17

中间件：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 启动命令&#xff1a; nohup sh bin/mqnamesrv &a…...

编程日记 2023/8/20 13:41:16

leetcode-动态规划-42-接雨水

题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3,2,1…...

编程日记 2023/8/20 13:40:15

[静态时序分析简明教程(十一)]浅议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…...

编程日记 2023/8/20 13:39:13

大数据-玩转数据-Flink 网站UV统计

一、说明 在实际应用中&#xff0c;我们往往会关注&#xff0c;到底有多少不同的用户访问了网站&#xff0c;所以另外一个统计流量的重要指标是网站的独立访客数&#xff08;Unique Visitor&#xff0c;UV&#xff09;。 二、数据准备 package com.lyh.flink06;import lombo…...

编程日记 2023/8/20 13:38:12

3分钟了解下cwnd和TCP拥塞控制算法

文章首发地址 cwnd是什么&#xff1f; cwnd是TCP拥塞控制中的一个重要概念&#xff0c;全称为“congestion window”&#xff0c;也被称为拥塞窗口。它用于限制发送方向网络发送数据的速度&#xff0c;以避免网络拥塞。cwnd是一个动态的值&#xff0c;可以根据网络状况动态调…...

编程日记 2023/8/20 13:37:08

设计模式之状态模式（State）的C++实现

1、状态模式的提出 在组件功能开发过程中&#xff0c;某些对象的状态经常面临变化&#xff0c;不同的状态&#xff0c;其对象的操作行为不同。比如根据状态写的if else条件情况&#xff0c;且这种条件变化是经常变化的&#xff0c;这样的代码不易维护。可以使用状态模式解决这…...

编程日记 2023/8/20 13:36:06

无涯教程-TensorFlow - Keras

Keras易于学习的高级Python库&#xff0c;可在TensorFlow框架上运行&#xff0c;它的重点是理解深度学习技术&#xff0c;如为神经网络创建层&#xff0c;以维护形状和数学细节的概念。框架的创建可以分为以下两种类型- 顺序API功能API 无涯教程将使用Jupyter Notebook执行和…...

编程日记 2023/8/20 13:35:03

使用SSH隧道将Ubuntu云服务器Jupyter Notebook端口映射到本地

本文主要实现了在Ubuntu云服务器后台运行Jupyter Notebook&#xff0c;并使用SSH隧道将服务器端口映射到本地 1. 生成配置文件 运行以下命令生成Jupyter Notebook的配置文件&#xff1a; jupyter notebook --generate-config这将在用户主目录下生成一个名为.jupyter的文件夹&…...

编程日记 2023/8/20 13:34:02

Keepalived+LVS部署高可用集群

文章目录 KeepalivedLVS(DR)部署高可用Web集群集群环境MASTER配置BACKUP配置检查Virtual IP是否漂移IPVS检查MASTERBACKUP Real Server配置附上个人写的小脚本 测试停用Real Server某一台的Apache服务停用Master上的keepalived检测Backup是否接管资源 KeepalivedLVS(DR)部署高可…...

编程日记 2023/8/20 13:33:01

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…...

编程日记 2023/8/20 13:31:59

在Orangepi5开发板3588s使用opencv获取摄像头画面

先感谢香橙派群的管理员耐心指导&#xff0c;经过不断的调试修改最后成功通过opencv调用mipi摄像头获取画面 就记录分享一下大概步骤希望大家少踩点坑&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我用的固件系统是ubuntu2022.0.4 固件是&#x…...

编程日记 2023/8/20 13:30:57

音视频 ffmpeg命令分类查询

命令参数内容-version显示版本 -bsfs 显示可用比特流filter-buildconf显示编译配置-formats显示可用格式(muxersdemuxers)-muxers显示可用复用器-demuxers显示可用解复用器-codecs显示可用编解码器(decodersencoders)-decoders显示可用解码器-encoders显示可用编码器-bsfs显示可…...

编程日记 2023/8/20 13:29:55

VSCode无法从Extensions下载工具时，把工具下载到本地并添加到VSCode编辑器

从VSCode 的 Extensions 下载 下载报错&#xff1a;Error while installing ...... extension. Please check the log for more details. 由于内网限制&#xff08;或者其他网络限制&#xff09;无法正常下载扩展工具到VSCode编辑器&#xff0c;可以把工具下载到本地再添加到V…...

编程日记 2023/8/20 13:28:50

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/12/19 21:20:20

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/12/9 7:25:28

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2025/12/19 2:25:32

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/12/14 4:22:15

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2025/12/15 14:26:27