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

关于Vue脚手架

news 2026/6/1 17:45:31

一、简介与安装

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

Claude本地化部署终极方案（企业级容器化全栈手册）：支持Anthropic API兼容、流式响应、模型热切换与RBAC权限隔离

更多请点击： https://codechina.net 第一章：Claude本地化部署的架构全景与企业级价值定位 Claude本地化部署并非简单地将模型权重下载后运行，而是一套融合推理引擎优化、安全沙箱隔离、API网关治理与可观测性集成的端到端架构体系。其核心目…...

编程新知 2026/5/26 1:06:56

HarmonyOS ArkTS DateUtil 日期增减与日历计算完整指南

文章目录背景一、引言二、日期增减方法详解使用示例三、日历计算方法详解四、Demo 演示：日期增减结果展示五、Demo 演示：月历视图完整实现六、日历视图关键点解析为什么要填充前置空格？getLastDayOfMonth 的实现技巧七、小结背景近期发现…...

编程新知 2026/5/26 0:34:21

终极免费方案：WandEnhancer完整解锁WeMod Pro功能快速指南

终极免费方案：WandEnhancer完整解锁WeMod Pro功能快速指南【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否渴望享受WeMod Pro会员的所…...

编程新知 2026/5/26 0:26:14

开发转兼职DBA（二）：执行计划教我做事

开发转兼职DBA（二）：执行计划教我做事查询慢了不知道为什么，加了索引还是慢，复合索引怎么建，执行计划怎么看——这些不是DBA的专利，是每个写SQL的开发者迟早要面对的事。文章目录开发转兼职DB…...

编程新知 2026/5/26 0:12:06

关联规则挖掘在Calabi-Yau流形Hodge数分析中的应用与复现

1. 项目概述：当数据挖掘遇见高维几何在理论物理和代数几何的交叉领域，Calabi-Yau流形一直扮演着核心角色。这些具有特殊拓扑结构的空间，不仅是弦理论中额外维度紧化的关键候选者，其本身丰富的数学性质也吸引着无数研究者。然而&am…...

编程新知 2026/5/25 23:06:49

LeagueAkari：英雄联盟终极自动化助手革命性指南

LeagueAkari：英雄联盟终极自动化助手革命性指南【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否在英雄联盟游戏中反复经历这…...

编程新知 2026/5/25 20:20:05

DLA功耗优化验证：tegrastats实战指南

重磅预告：本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容，该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著，特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/25 17:48:30

3步开启Windows 11安卓应用新体验：WSA完整使用指南

3步开启Windows 11安卓应用新体验：WSA完整使用指南【免费下载链接】WSA Developer-related issues and feature requests for Windows Subsystem for Android 项目地址: https://gitcode.com/gh_mirrors/ws/WSA Windows Subsystem for Android（简…...

编程新知 2026/5/27 4:54:54