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

认识vue2脚手架

news 2026/5/30 14:53:40

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

Python 3.7 + XGBoost 多分类实战：从数据清洗到SHAP模型解释的保姆级教程

Python 3.7 XGBoost 多分类实战&#xff1a;从数据清洗到SHAP模型解释的保姆级教程在机器学习领域&#xff0c;XGBoost因其出色的性能和可解释性成为众多数据科学家的首选工具。本文将带您完整走过多分类任务的全流程&#xff0c;从原始数据到可解释的预测模型&#xff0c;每个…...

编程新知 2026/5/26 2:29:35

小米MIMO最新邀请码

欢迎使用&#xff0c;各得10元体验金...

编程新知 2026/5/26 1:57:14

Windows10下V-REP教育版安装保姆级教程（附百度网盘资源与避坑点）

Windows10系统V-REP教育版完整安装指南&#xff1a;从下载到实战避坑在机器人仿真和自动化控制领域&#xff0c;V-REP&#xff08;现更名为CoppeliaSim&#xff09;作为一款功能强大的跨平台机器人仿真软件&#xff0c;已经成为众多工科学生和研究人员的首选工具。特别是其教育…...

编程新知 2026/5/26 0:28:16

LSTM、GRU与注意力机制在股票预测中的性能对比与实战指南

1. 项目概述与核心价值在量化金融和算法交易这个行当里&#xff0c;预测股票价格走势一直是个充满诱惑又极具挑战的“圣杯”问题。传统的技术分析和基本面分析&#xff0c;虽然各有拥趸&#xff0c;但在面对市场的高噪声、非线性和突发性事件时&#xff0c;往往显得力不从心。我…...

编程新知 2026/5/25 14:38:37

通过用量看板清晰观测Taotoken的API调用成本与消耗

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过用量看板清晰观测Taotoken的API调用成本与消耗 对于将大模型能力集成到产品中的团队而言&#xff0c;API调用成本是项目预算与…...

编程新知 2026/5/25 13:10:32

Apple Silicon Mac 电池管理的终极解决方案：Battery Toolkit 完整指南

Apple Silicon Mac 电池管理的终极解决方案&#xff1a;Battery Toolkit 完整指南 【免费下载链接】Battery-Toolkit Control the platform power state of your Apple Silicon Mac. 项目地址: https://gitcode.com/gh_mirrors/ba/Battery-Toolkit 在当今移动办公时代&a…...

编程新知 2026/5/25 13:01:37

3分钟掌握PUBG罗技鼠标宏：新手也能轻松压枪的完整指南

3分钟掌握PUBG罗技鼠标宏&#xff1a;新手也能轻松压枪的完整指南 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生》中难以控制…...

编程新知 2026/5/25 12:35:56

SharpKeys终极指南：Windows键盘重映射的专业解决方案

SharpKeys终极指南&#xff1a;Windows键盘重映射的专业解决方案 【免费下载链接】sharpkeys SharpKeys is a utility that manages a Registry key that allows Windows to remap one key to any other key. 项目地址: https://gitcode.com/gh_mirrors/sh/sharpkeys 在…...

编程新知 2026/5/25 12:22:23

5.18~5.24补题

牛客周赛Round 144 A.我是谁&#xff1f;牛客周赛Round 144 B.我是清楚姐姐牛客周赛Round 144 C.其实我是小苯 牛客周赛Round 144 D.骗你的&#xff0c;其实我是小红牛客周赛Round 144 E.好吧&#xff0c;我是BingbongSMU Spring 2026 Round 4 ASMU Spring 2026 Round 4 BSMU S…...

编程新知 2026/5/25 11:02:54

Linux网络编程基础（UDP socket编程）

UDP&#xff08;用户数据报协议&#xff09;是一种无连接的传输层协议&#xff0c;与TCP不同&#xff0c;它不保证数据包的顺序和可靠性&#xff0c;但其简单性和低延迟特性使其在实时应用中非常有用。一、UDP协议核心特性UDP作为传输层协议&#xff0c;与TCP的“可靠连接”不同…...

编程新知 2026/5/25 10:56:12