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

关于Vue脚手架

news 2025/11/6 20:02:25

一、简介与安装

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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/10/29 17:53:07

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

全球首个30米分辨率湿地数据集(2000—2022)

数据简介今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/4 16:34:38

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/10/11 22:46:21

React---day11

14.4 react-redux第三方库提供connect、thunk之类的函数以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2025/9/13 7:43:29

Java编程之桥接模式

定义桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。用例子…...

编程新知 2025/11/3 2:51:56

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52