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

认识vue2脚手架

news 文章来源：https://blog.csdn.net/lh_1254/article/details/146130880 2025/5/5 10:02:58

1.认识脚手架结构

使用VSCode将vue项目打开：

package.json：包的说明书（包的名字，包的版本，依赖哪些库）。该文件里有webpack的短命令：

serve（启动内置服务器）

build命令是最后一次的编译，生成html css js，给后端人员

lint做语法检查的。

2.分析HelloWorld程序
1、index.html

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8" />

<!-- 让IE浏览器启用最高渲染标准。IE8是不支持Vue的。 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- 开启移动端虚拟窗口（理想视口） -->

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<!-- 设置页签图标 -->

<link rel="icon" href="<%= BASE_URL %>favicon.ico" />

<!-- 设置标题 -->

<title>欢迎使用本系统</title>

</head>

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

<!-- 容器 -->

<div id="app"></div>

<!-- built files will be auto injected -->

</body>

</html>

在index.html文件中：
没有看到引入vue.js文件。
也没有看到引入main.js文件。Vue脚手架会自动找到main.js文件。不需要你手动引入。
所以main.js文件的名字不要随便修改，main.js文件的位置不要随便动。
2、main.js

// 等同于引入vue.js

import Vue from 'vue'

// 导入根组件

import App from './App.vue'

// 关闭生产提示信息

Vue.config.productionTip = false

// 创建Vue实例

new Vue({

render: h => h(App),

}).$mount('#app')

3、es语法检测。
如果用单字母表示组件的名字，会报错，名字应该由多单词组成。
解决这个问题有两种方案：
第一种：把所有组件的名字修改一下。
第二种：在vue.config.js文件中进行脚手架的默认配置。配置如下：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true

// 保存时是否进行语法检查。true表示检查，false表示不检查。默认值是true。

lintOnSave : false,

// 配置入口

pages: {

index: {

entry: 'src/main.js',

}

},

})

3.脚手架默认配置

脚手架默认配置在vue.config.js文件中进行。

main.js、index.html等都是可以配置的。

配置项可以参考Vue CLI官网手册，如下：

// vue.config.js
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  // 保存时是否进行语法检查。true表示检查，false表示不检查。默认值是true。
  lintOnSave: false,
  // 配置入口
  pages: {
    index: {
      entry: "src/main.js",
    },
  },
});

相关文章：

认识vue2脚手架

1.认识脚手架结构 使用VSCode将vue项目打开&#xff1a; package.json&#xff1a;包的说明书&#xff08;包的名字&#xff0c;包的版本&#xff0c;依赖哪些库&#xff09;。该文件里有webpack的短命令&#xff1a; serve&#xff08;启动内置服务器&#xff09; build命令…...

编程日记 2025/3/11 1:29:39

【STM32】STM32系列产品以及新手入门的STM32F103

&#x1f4e2; STM32F103xC/D/E 系列是一款高性能、低功耗的 32 位 MCU&#xff0c;适用于工业、汽车、消费电子等领域&#xff1b;基于 ARM Cortex-M3&#xff0c;主频最高 72MHz&#xff0c;支持 512KB Flash、64KB SRAM&#xff0c;适合复杂嵌入式应用&#xff0c;提供丰富的…...

编程日记 2025/3/11 1:28:38

＜建模软件安装教程1＞Blender4.2系列

Blender4.2安装教程 0注意&#xff1a;Windows环境下安装 第一步&#xff0c;百度网盘提取安装包。百度网盘链接&#xff1a;通过网盘分享的文件&#xff1a;blender.zip 链接: https://pan.baidu.com/s/1OG0jMMtN0qWDSQ6z_rE-9w 提取码: 0309 --来自百度网盘超级会员v3的分…...

编程日记 2025/3/11 1:27:36

CentOS Docker 安装指南

CentOS Docker 安装指南 引言 Docker 是一个开源的应用容器引擎&#xff0c;它允许开发者打包他们的应用以及应用的依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。Docker 容器是完全使用沙箱机制&#xff0c;相互之…...

编程日记 2025/3/11 1:26:35

分布式ID生成方案：数据库号段、Redis与第三方开源实现

分布式ID生成方案&#xff1a;数据库号段、Redis与第三方开源实现 引言 在分布式系统中&#xff0c;全局唯一ID生成是核心基础能力之一。本文针对三种主流分布式ID生成方案&#xff08;数据库号段模式、Redis方案、第三方开源框架&#xff09;进行解析&#xff0c;从实现原理…...

编程日记 2025/3/11 1:23:30

tcc编译器教程2 编译lua解释器

本文主要介绍了使用tcc编译器编译lua解释器源码。 1 介绍 lua是一门编程语言,开源且源码很容易编译,我平时用来测试C语言编程环境时经常使用。一般能编译成功就说明编程环境设置正常。下面用之前设置好的tcc编程环境进行测试。 2 获取源码 我一般有保留多个版本的lua源码进…...

编程日记 2025/3/11 1:12:17

利用 requestrepo 工具验证 XML外部实体注入漏洞

1. 前言 在数字化浪潮席卷的当下&#xff0c;网络安全的重要性愈发凸显。应用程序在便捷生活与工作的同时&#xff0c;也可能暗藏安全风险。XXE&#xff08;XML外部实体&#xff09;漏洞作为其中的典型代表&#xff0c;攻击者一旦利用它&#xff0c;便能窃取敏感信息、掌控服务…...

编程日记 2025/3/11 1:10:14

在 Maven 中使用 ＜scope＞ 元素：全面指南

目录 前言 在 Maven 中&#xff0c; 元素用于定义依赖项的作用范围&#xff0c;即依赖项在项目生命周期中的使用方式。正确使用 可以帮助我们优化项目的构建过程&#xff0c;减少不必要的依赖冲突&#xff0c;并提高构建效率。本文将详细介绍 的使用步骤、常见作用范围、代码…...

编程日记 2025/3/11 1:08:11

uni_app实现下拉刷新

1. 在页面配置中启用下拉刷新 首先&#xff0c;你需要在页面的 pages.json 文件中启用下拉刷新功能。 {"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","enablePull…...

编程日记 2025/3/11 1:05:08

PCIe协议之RCB、MPS、MRRS详解

✨前言&#xff1a; PCIe总线的存储器写请求、存储器读完成等TLP中含有数据负载&#xff0c;即Data Payload。Data Payload的长度和MPS&#xff08;Max Payload Size&#xff09;、MRRS&#xff08;Max Read Request Size&#xff09;和RCB&#xff08;Read Completion Bounda…...

编程日记 2025/3/11 1:04:05

达梦数据库在Linux，信创云 安装，备份，还原

&#xff08;一&#xff09;系统环境检查 1操作系统&#xff1a;确认使用的是国产麒麟操作系统&#xff0c;检查系统版本是否兼容达梦数据库 V8。可以通过以下命令查看系统版本&#xff1a; cat /etc/os-release 2硬件资源&#xff1a;确保服务器具备足够的硬件资源&#xff0…...

编程日记 2025/3/11 1:03:04

使用Dockerfile打包java项目生成镜像部署到Linux_java项目打docker镜像的dockerfile

比起容器、镜像来说&#xff0c;Dockerfile 非常普通&#xff0c;它就是一个纯文本&#xff0c;里面记录了一系列的构建指令&#xff0c;比如选择基础镜像、拷贝文件、运行脚本等等&#xff0c;每个指令都会生成一个 Layer&#xff0c;而 Docker 顺序执行这个文件里的所有步骤&…...

编程日记 2025/3/11 1:01:54

爬虫案例九js逆向爬取CBA中国篮球网

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、CBA网站分析二、代码 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 爬取CBA中国篮球网 提示&#xff1a;以下是本篇文章正文内容…...

编程日记 2025/3/11 0:57:09

【DeepSeek】Ubuntu快速部署DeepSeek（Ollama方式）

文章目录 人人都该学习的DeepSeekDeepSeek不同版本功能差异DeepSeek与硬件直接的关系DeepSeek系统兼容性部署方式选择部署步骤&#xff08;Ollama方式&#xff09;1.选定适合的deepseek版本2.环境准备3.安装Ollama4.部署deepseek5.测试使用 人人都该学习的DeepSeek DeepSeek 作…...

编程日记 2025/3/11 0:54:06

C++后端服务器开发技术栈有哪些？有哪些资源或开源库拿来用？

一、 C后台服务器开发是一个涉及多方面技术选择的复杂领域&#xff0c;特别是在高性能、高并发的场景下。以下是C后台服务器开发的一种常见技术路线&#xff0c;涵盖了从基础到高级的技术栈。 1. 基础技术栈 C标准库 C11/C14/C17/C20&#xff1a;使用现代C特性&#xff0c;如…...

编程日记 2025/3/11 0:50:02

基于SpringBoot的餐厅点餐管理系统设计与实现(源码+SQL脚本+LW+部署讲解等)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/3/11 0:47:59

服务端和客户端通信(TCP)

服务端 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading.Tasks;namespace TeachTcpServer {class Program{static void Main(string[] args){#region 知识点一 …...

编程日记 2025/3/11 0:46:58

Java 大视界 -- Java 大数据在智能体育赛事运动员表现分析与训练优化中的应用（122）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/3/11 0:43:55

基于Spring Boot的多级缓存架构实现

基于Spring Boot的多级缓存架构实现 以下是一个基于Spring Boot的多级缓存架构实现示例 多级缓存架构实现方案 1. 依赖配置&#xff08;pom.xml&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-star…...

编程日记 2025/3/11 0:42:53

Git与GitHub：理解两者差异及其关系

目录 Git与GitHub&#xff1a;理解两者差异及其关系Git&#xff1a;分布式版本控制系统概述主要特点 GitHub&#xff1a;基于Web的托管服务概述主要特点 Git和GitHub如何互补关系现代开发工作流 结论 Git与GitHub&#xff1a;理解两者差异及其关系 Git&#xff1a;分布式版本控…...

编程日记 2025/3/11 0:40:51

ALG(Alloy+Loki+Grafana)轻量级日志系统

ALG(AlloyLokiGrafana)轻量级日志系统 前提要求 GrafanaMinioNginxPrometheus Grafana日志收集系统旧版是PLG(ProtailLokiGrafana), Protail收集日志, Loki存储, Grafana展示, 后续的Protail不维护了, Grafana推出了Alloy代替Pritial, 除了收集日志外, 还集成管理Prometheus各种…...

编程日记 2025/3/11 0:35:43

【漫话机器学习系列】121.偏导数（Partial Derivative）

偏导数&#xff08;Partial Derivative&#xff09;详解 1. 引言 在数学分析、机器学习、物理学和工程学中&#xff0c;我们经常会遇到多个变量的函数。这些函数的输出不仅取决于一个变量&#xff0c;而是由多个变量共同决定的。那么&#xff0c;当其中某一个变量发生变化时&…...

编程日记 2025/3/11 0:27:31

Deepseek可以通过多种方式帮助CAD加速工作

自动化操作&#xff1a;通过Deepseek的AI能力&#xff0c;可以编写脚本来自动化重复性任务。例如&#xff0c;使用Python脚本调用Deepseek API&#xff0c;在CAD中实现自动化操作。 插件开发&#xff1a;结合Deepseek进行二次开发&#xff0c;可以创建自定义的CAD插件。例如&a…...

编程日记 2025/3/11 0:24:29

【工具使用】IDEA 社区版如何创建 Spring Boot 项目（详细教程）

IDEA 社区版如何创建 Spring Boot 项目&#xff08;详细教程&#xff09; Spring Boot 以其简洁、高效的特性&#xff0c;成为 Java 开发的主流框架之一。虽然 IntelliJ IDEA 专业版提供了Spring Boot 项目向导&#xff0c;但 社区版&#xff08;Community Edition&#xff09…...

编程日记 2025/3/11 0:22:25

QT中串口打开按钮如何点击打开后又能点击关闭

前言&#xff1a; if (!portOpen) { // 打开串口 if (!sp18Controller->initializePort("COM5", 38400)) { QMessageBox::critical(this, "Error", "Failed to open serial port."); return; } ui->btnOpenPort_2->setText("Close…...

编程日记 2025/3/11 0:19:22

【AI深度学习基础】PyTorch初探

引言 PyTorch 是由 Facebook 开源的深度学习框架&#xff0c;专门针对 GPU 加速的深度神经网络编程&#xff0c;它的核心概念包括张量&#xff08;Tensor&#xff09;、计算图和自动求导机制。PyTorch作为Facebook开源的深度学习框架&#xff0c;凭借其动态计算图和直观的API设…...

编程日记 2025/3/11 0:18:21

springboot011基于springboot的课程作业管理系统（源码+包运行+LW+技术指导）

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得难了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等&#xff0c;你想解决的问题&#xff0c;今天…...

编程日记 2025/3/11 0:14:15

快速从C过度C++（一）：namespace，C++的输入和输出，缺省参数，函数重载

&#x1f4dd;前言&#xff1a; 本文章适合有一定C语言编程基础的读者浏览&#xff0c;主要介绍从C语言到C过度&#xff0c;我们首先要掌握的一些基础知识&#xff0c;以便于我们快速进入C的学习&#xff0c;为后面的学习打下基础。 这篇文章的主要内容有&#xff1a; 1&#x…...

编程日记 2025/3/11 0:10:09

PostgreSQL时间计算大全：从时间差到时区转换（保姆级教程）

一、时间计算的三大核心场景 当你遇到这些需求时&#xff0c;本文就是你的救星&#x1f31f;&#xff1a; 倒计时功能&#xff1a;计算活动剩余天数 用户行为分析&#xff1a;统计操作间隔时间 跨国系统&#xff1a;多时区时间统一管理 报表生成&#xff1a;自动计算同比/环…...

编程日记 2025/3/11 0:08:07

laravel es 相关代码 ElasticSearch

来源&#xff1a; github <?phpnamespace App\Http\Controllers;use Elastic\Elasticsearch\ClientBuilder; use Illuminate\Support\Facades\DB;class ElasticSearch extends Controller {public $client null;public function __construct(){$this->client ClientB…...

编程日记 2025/3/11 0:06:03