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

认识vue2脚手架

news 2026/3/29 12:53:23

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

无人机飞控必看：MPU6050互补滤波实战对比测试（DMP vs Mahony）

MPU6050姿态解算实战&#xff1a;Mahony互补滤波与DMP深度对比 去年调试四轴飞行器时&#xff0c;我曾连续72小时盯着屏幕上的姿态角曲线发呆——为什么明明静止的飞控板&#xff0c;Roll角却以每小时5度的速度缓慢偏移&#xff1f;这个困扰无数开发者的经典问题&#xff0c;最…...

编程新知 2026/3/29 12:38:14

别再只靠密码了！手把手教你用Gpg4win给邮件和文件加把‘数字锁’（附Kleopatra实战截图）

别再只靠密码了&#xff01;手把手教你用Gpg4win给邮件和文件加把"数字锁" 你是否经常担心重要文件被他人窥探&#xff1f;或是害怕商务邮件在传输过程中遭人篡改&#xff1f;在这个数据泄露频发的时代&#xff0c;仅靠密码保护敏感信息已经远远不够。今天&#xff…...

编程新知 2026/3/29 12:20:08

Linux终极生态指南：5个实战技巧打造高效开源工作流

Linux终极生态指南&#xff1a;5个实战技巧打造高效开源工作流 【免费下载链接】awesome-linux :penguin: A list of awesome projects and resources that make Linux even more awesome. :penguin: 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-linux Linux生…...

编程新知 2026/3/29 11:57:53

如何用res-downloader解决多平台资源下载难题：从入门到精通

如何用res-downloader解决多平台资源下载难题&#xff1a;从入门到精通 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: https://gitcod…...

编程新知 2026/3/29 11:55:50

探索800+免费接口：API资源库的高效集成指南

探索800免费接口&#xff1a;API资源库的高效集成指南 【免费下载链接】public-api-lists A collective list of free APIs for use in software and web development &#x1f680; (Clone of https://github.com/public-apis/public-apis) 项目地址: https://gitcode.com/G…...

编程新知 2026/3/29 11:25:19

人工智能入门全景图：Nanbeige 4.1-3B带你梳理AI核心概念与技术栈

人工智能入门全景图&#xff1a;Nanbeige 4.1-3B带你梳理AI核心概念与技术栈 你是不是也对人工智能充满好奇&#xff0c;但一看到那些复杂的术语和庞大的技术栈就感到无从下手&#xff1f;机器学习、深度学习、神经网络、NLP、CV……这些词听起来很酷&#xff0c;但它们到底是…...

编程新知 2026/3/29 10:36:58

Windows 7 SP2重构方案：现代硬件适配与系统焕新体验

Windows 7 SP2重构方案&#xff1a;现代硬件适配与系统焕新体验 【免费下载链接】win7-sp2 UNOFFICIAL Windows 7 Service Pack 2, to improve basic Windows 7 usability on modern systems and fully update Windows 7. 项目地址: https://gitcode.com/gh_mirrors/wi/win7-…...

编程新知 2026/3/29 10:14:19

lingbot-depth-pretrain-vitl-14效果展示：多光照/反光表面深度补全自然边缘案例

lingbot-depth-pretrain-vitl-14效果展示&#xff1a;多光照/反光表面深度补全自然边缘案例 1. 引言&#xff1a;当深度图遇上“反光杀手” 你有没有遇到过这种情况&#xff1f;用深度相机扫描一个光滑的桌面&#xff0c;或者对着窗户拍一张照片&#xff0c;结果生成的深度图…...

编程新知 2026/3/29 9:32:06

别再让地图‘飘’了！深入浅出解析Cesium中GCJ-02、BD-09坐标偏移原理与DVGIS库实战

解密国内地图坐标系&#xff1a;从原理到实战解决Cesium中的“飘移”问题 你是否曾在Cesium中加载不同来源的地图数据时&#xff0c;发现明明标注的是同一个位置&#xff0c;却出现了明显的偏移&#xff1f;这种“飘移”现象背后&#xff0c;隐藏着国内地图坐标系复杂的加密体系…...

编程新知 2026/3/29 9:26:03

WarcraftHelper：魔兽争霸3兼容性问题的全方位解决方案

WarcraftHelper&#xff1a;魔兽争霸3兼容性问题的全方位解决方案 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 问题发现&#xff1a;现代系统下的经…...

编程新知 2026/3/29 7:55:32