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

关于Vue脚手架

news 2025/12/28 12:06:01

一、简介与安装

1 简介

Vue Cli 全称Vue command line interface(Vue命令行接口)，俗称Vue脚手架，是Vue官方提供的一个标准化开发工具(开发平台)。可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

参考官网：Vue CLI

最新版本是4.x，目前处于维护模式

其优点

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化的webpack配置

2 安装脚手架

第一步：验证npm指令是否存在

如果不存在，需要安装nodejs软件

官网：https://nodejs.org/en

第二步：更换镜像

npm config set registry https://registry.npmmirror.com

or 

npm config set registry htps://registry.npm.taobao.org

扩展：

查看是否更换成功： npm config get registry

删除最新镜像： npm config delete registry

第三步：安装脚手架(全局安装，只需要安装一次)

npm install -g @vue/cli

# OR

yarn global add @vue/cli

第四步：测试是否安装成功，检查一下版本号

vue -V
或者
vue --version

二、Vue项目创建与解析

1 如何创建Vue项目

第一步: 选择项目要创建的位置

比如在D:盘的一个文件夹projects里，那么cmd当前位置，需要切入该文件夹里

第二步：创建项目，想好自己的项目名称，比如first_vue

第三步: 按照提示来

错误总结

第一个：java_home

第二个：Error: spawn yarn ENOENT

打开 C盘，在 C盘里，打开 users （用户名）的文件夹，然后在右侧搜索名为 .vuerc 的文件

{"useTaobaoRegistry": false,"packageManager": "npm"
}

2 项目相关指令

启动项目：npm run serve
暂停项目：Ctril+C

3 脚手架组织结构解析

脚手架文件结构：

.文件目录
├── node_modules:  vue库文件以及第三方库文件 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── components: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件 ，可以自行参考babel官网
├── package-lock.json: 包版本控制文件 
├── package.json: 应用包配置文件
└── README.md: 应用描述文件

三、入门案例

src/components/School1.vue

<template><ul class="schoolUl"><li>学校名称：{{schoolName1}}</li><ul><li>学校地址：{{schoolAddress1}}</li></ul></ul>
</template>

<script>export default {name:"School1",data(){return {schoolName1:"吉林大学",schoolAddress1:"高新区前进大街2699号"}}}
</script>

<style>.schoolUl{list-style-type:lower-alpha;}
</style>

src/components/School2.vue:

<template><ul class="schoolUl"><li>学校名称：{{schoolName2}}</li><ul><li>学校地址：{{schoolAddress2}}</li></ul></ul>
</template><script>export default {name:"School2",data(){return {schoolName2:"北京大学",schoolAddress2:"海淀区颐和园路5号"}}}
</script><style>.schoolUl{list-style-type:lower-alpha;}
</style>

src\components\City.vue:

<template>
<ul>
<li>{{cityName1}}
<School1></School1>
</li>
<li>{{cityName2}}
<School2></School2>
</li>
</ul>
</template>

<script>
import School1 from './School1.vue'
import School2 from './School2.vue';
export default {
name:"City",
data(){
return {
cityName1:"长春市",
cityName2:"北京市"
}
},
components:{
School1,
School2
}
}
</script>

<style>
</style>

src/App.vue

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

<script>
import City from './components/City.vue'

export default {name: 'App',components: {City}
}
</script>

<style>
</style>

src/main.js:

/*该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
//引入App组件，他是所有组件的父组件
import App from './App.vue'

//关闭vue的生产提示
//Vue.config.productionTip = false

new Vue({// 简写形式     将App组件放入容器中render: h => h(App),// 完整形式// render(createElement){//     return createElement(App)// }}).$mount('#app')

public/index.html:

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 --><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><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 当浏览器不支持js时，里面的元素内容就被渲染 -->  <noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScriptenabled. Please enable it to continue.</strong></noscript><!-- 容器 --><div id="app"></div></body>
</html>

小贴士：常用快捷键：控制台打开的快捷键： ctrl+`

四、render函数

按照以前的写法，我们应该这样写:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({el:"#app"template: `<App></App>`
});

但是会报如下错误：

因为vue项目，默认引用的是node_modules\vue\dist\vue.runtime.esm.js，在node_modules\vue\package.json中明晃晃的写着：模块化语法时，引用的是该js

vue.js 与 vue.runtime.xxx.js的区别：

1. vue.js 是完整版的 Vue，包含：核心功能+模板解析器
2. vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器

因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容

render(a){//console.log(typeof a) // Function, 该函数就是用来创建DOM节点的return a('h1','你好，欢迎来到我的家');
}
//简写：
render:h => h(h1)

自己定义一个用于创建节点的函数，你应该会这么定义：

function createNode(nodeName,content){var node = document.createElement(nodeName);var txt = document.createTextNode(content)node.appendChild(txt)return node;
}

五、配置文件

vue.config.js 是一个可选的配置文件，如果项目的（和package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载

使用vue.config.js 可以对脚手架进行个性化定制，详见配置参考官网：配置参考 | Vue CLI

module.exports = {pages: {index: {// 入口entry: 'src/index/main.js'}},// 关闭语法检查lintOnSave:false
}

关于Vue脚手架

一、简介与安装 1 简介 Vue Cli 全称Vue command line interface(Vue命令行接口)，俗称Vue脚手架， 是Vue官方提供的一个标准化开发工具(开发平台)。可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】参考官网&#xff1a…...

编程日记 2024/10/18 0:36:30

MySQL 指定字段排序

MySQL 中的 ORDER BY FIELD 用法详解一、引言在数据库查询中，排序是一个常见的需求。MySQL 提供了 ORDER BY 子句来对查询结果进行排序，其中 FIELD() 函数是一种非常巧妙且灵活的排序方式。通过 ORDER BY FIELD，可以按照指定的顺序对某个…...

编程日记 2024/10/18 0:35:29

Mysql—高可用集群MHA

1:什么是MHA？ MHA（Master High Availability）是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中，MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切…...

编程日记 2024/10/18 0:34:27

MeshGS: Adaptive Mesh-Aligned GaussianSplatting for High-Quality Rendering 论文解读

目录一、概述二、相关工作 1、神经渲染 2、基于Mesh的渲染 3、基于点的渲染和高斯溅射三、前置知识 1、SDF 2、Marching Cubes算法四、MeshGS 1、初始化Mesh网格 2、基于Mesh的GS溅射 3、损失函数一、概述提出一种基于距离的高斯splatting，并且将高…...

编程日记 2024/10/18 0:33:25

JDK-23与JavaFX的安装

一、JDK-23的安装 1.下载 JDK-23 官网直接下载，页面下如图： 2.安装 JDK-23 2.1、解压下载的文件找到下载的 ZIP 文件，右键点击并选择“解压到指定文件夹”，将其解压缩到您希望的目录，例如 C:\Program Files\Java\…...

编程日记 2024/10/18 0:32:24

LeetCode讲解篇之2266. 统计打字方案数

文章目录题目描述题解思路题解代码题目链接题目描述题解思路我们使用逆向思维发现如果连续按存在三个字母的按键，最后一个按键表示的字母可以是某个字母连续出现一次、两次、三次这三种情况的方案数之和我们发现连续按存在三个字母的按键，当连续按…...

编程日记 2024/10/18 0:31:23

2025推荐选题|基于MVC的农业病虫害防治平台的设计与实现

作者简介：Java领域优质创作者、CSDN博客专家、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验，被多个学校常年聘为校外企业导师，指导学生毕业设计并参与学生毕业答辩指导，…...

编程日记 2024/10/18 0:30:22

Vue 3 的不同版本总结

Vue 3 的不同版本（例如 3.x 系列的多个次版本）在语法和特性上有一些变化和改进。以下是 Vue 3 中随着版本迭代的一些语法变化和新特性的总结。 1. Vue 3.0: 初始发布主要特性： 组合式 API (Composition API)：引入 setup 函数&…...

编程日记 2024/10/18 0:27:18

在 wpf中, 如果遇到控件的 MouseEnter MouseLeave 属性时, 往往会因为有参数object sender, System.Windows.Input.MouseEventArgs e 很多人选择直接生成属性在后台, 破坏了MVVM, 这其实是不必要的. 我们完全可以用 xmlns:i“http://schemas.microsoft.com/xaml/behaviors” 完…...

编程日记 2024/10/18 0:25:15

TELEDYNE DALSA相机连接编码器

文章目录对于线阵相机，欲令扫描拍照出来的图像不失真变形，则需要保证横向像素精度纵向像素精度，因此有下列等式成立： 现场的横向视野是650mm,横向实际像素是7663pixel，产线运动线速度为416.667mm/S,则可以计算出行频应…...

编程日记 2024/10/18 0:23:13

每天一个数据分析题（五百零八）- 机器学习模型

逻辑回归和支持向量机（SVM）都是经典的机器学习模型，逻辑回归和SVM的联系与区别，不正确的是？ A. 二者都可以处理分类问题 B. 二者都可以增加不同的正则化项 C. 二者都是参数模型 D. SVM的处理方法是只考虑support v…...

编程日记 2024/10/18 0:22:12

leetcode栈与队列（一）-有效的括号

题目 . - 力扣（LeetCode） 给定一个只包括 (，)，{，}，[，] 的字符串 s ，判断字符串是否有效。有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的…...

编程日记 2024/10/18 0:21:12

鸿蒙NEXT开发-知乎评论小案例（基于最新api12稳定版）

注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识专栏地址: https://blog.csdn.net/qq_56760790/…...

编程日记 2024/10/18 0:19:10

重学SpringBoot3-集成Redis（十一）之地理位置数据存储

更多SpringBoot3内容请关注我的专栏：《SpringBoot3》期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis（十一）之地理位置数据存储 1. GEO 命令简介2. 项目环境配置2.1. 依赖引入2.2. Redis 配置 3. GEO 数据存储和查询实现3…...

编程日记 2024/10/18 0:18:09

Docker-compose 单节点管理、consul 注册中心、registrator、template

consul是一个基于分布式的服务发现和配置管理工具。它具有快速构建分布式架构，提供服务发现和服务注册功能。consul职能：1、自动发现、注册；2、自动配置；3、自动更新服务发现：自动检查网络中的服务（如数据…...

编程日记 2024/10/18 0:17:07

制药企业MES与TMS的数据库改造如何兼顾安全与效率双提升

*本图由AI生成在全球制造业加速数字化转型的浪潮中，一家来自中国的、年营业额超过200亿元的制药企业以其前瞻性的视角和果断的行动，成为该行业里进行国产化改造的先锋。通过实施数据库改造试点项目，该企业实现了其关键业务系统MES&#xff0…...

编程日记 2024/10/18 0:15:05

Spring Boot比Spring多哪些注解

Spring Boot 是 Spring 框架的扩展，它旨在简化 Spring 应用程序的初始搭建以及开发过程。与 Spring 相比，Spring Boot 提供了许多额外的注解来进一步简化配置和开发工作。以下是 Spring Boot 特有的一些核心注解，这些注解在 Spring 中不可用&…...

编程日记 2024/10/18 0:14:04

985研一学习日记 - 2024.10.17

一个人内耗，说明他活在过去；一个人焦虑，说明他活在未来。只有当一个人平静时，他才活在现在。日常 1、起床6:00√ 2、健身1个多小时今天练了二头和背部，明天练胸和三头 3、LeetCode刷了3题旋转图像&#xff1a…...

编程日记 2024/10/18 0:13:03

牛客SQL29详解计算用户的平均次日留存率

牛客SQL29详解计算用户的平均次日留存率牛客SQL29详解计算用户的平均次日留存率叮嘟！这里是小啊呜的学习课程资料整理。好记性不如烂笔头，今天也是努力进步的一天。一起加油进阶吧！ 牛客SQL29详解计算用户的平均次日留存率题目&#x…...

编程日记 2024/10/18 0:12:02

Redis --- 第四讲 --- 常用数据结构 --- 其他类型stream、bitmap……。补充内容scan命令。

通过前面的学习，我们已经学习了Redis最关键的五个数据结构：String、List、Hash、Set、ZSet。这五个数据结构应用广泛，频繁使用。 redis中包含的所有类型，下面将要介绍不常用的类型。一、streams类型介绍事件、epoll/IO多路复…...

编程日记 2024/10/18 0:10:01

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2025/12/27 11:23:00

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2025/12/18 17:36:43

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因常见解决方法更好的解决方法设计精妙之处登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2025/12/15 13:11:03

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2025/12/24 20:30:16

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/12/28 6:26:50