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

关于Vue脚手架

news 文章来源：https://blog.csdn.net/weixin_64513190/article/details/143026053 2025/5/14 6:27:13

一、简介与安装

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

Java多线程--实现跑马小游戏

线程的实现方式继承Thread类：void run()方法没有返回值，无法抛异常实现Runnable接口：void run()方法没有返回值，无法抛异常实现Callable接口：V call() throws Exception 返回结果，能够抛异常实现Callab…...

编程日记 2024/10/18 0:08:57

扫雷（C 语言）

目录一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷三、完整代码四、总结一、游戏设计分析本次设计的扫雷游戏是展示一个 9 * 9 的棋盘，然后输入坐标进行判断，若是雷，则游戏结束，否则…...

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

有源滤波器（一）

滤波器设计工具 | 滤波器设计向导 | Analog Devices 一种带通滤波器： 有源滤波器完美规避了这个带不带负载滤波参数变化的问题，但是有源滤波器只能处理小电流和小电压： 鼠标所指的电路图是一阶同相滤波器，右上角的是他的幅频特性…...

编程日记 2024/10/18 0:06:54

Flume面试整理-常见的Channel类型

Apache Flume提供了多种Channel（通道）类型，作为Source（源）和Sink（汇）之间的缓冲区，确保数据的可靠传输。不同类型的Channel提供了不同的性能和可靠性，适用于不同的应用场景。以下是Flume中常见的Channel类型及其特点： 1. Memory Channel ● 描述：Memory Channel将数…...

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

【前端】如何制作一个自己的网页（6）

接上文网络中的图片我们也可以在百度等网站搜索自己喜欢的图片。此时对图片点击右键，选择【复制图片地址】，即可获得该图片的网络地址。其实在HTML中，除了图片以外，我们还可以利用地址找到另一个网页。如右图所示&#…...

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

Linux系统性能调优技巧

Linux系统性能调优是一个复杂而持续的过程，需要综合考虑硬件、软件、内核参数、进程管理等多个方面。以下是一些具体的调优技巧： 一、硬件优化增加物理内存：内存不足时，系统会频繁进行交换（swapping）活动…...

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

数学建模算法与应用第5章插值与拟合方法

目录 5.1 插值方法 Matlab代码示例：线性插值 Matlab代码示例：样条插值 5.2 曲线拟合的线性最小二乘法 Matlab代码示例：线性拟合 5.3 最小二乘优化与多项式拟合 Matlab代码示例：多项式拟合 5.4 曲线拟合与函数逼近 Matlab代…...

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

3D Slicer 教程二 ---- 数据集

上一章下载3d slicer的软件,这章从加载数据集来弄清楚3dslicer怎么使用. 一. 加载数据集如果没有数据集,也可用用样本数据. (1) "File" --> "add Data" 可以添加图片文件夹,(试了MP4不行,内镜的视频估计不支持),添加单个图片的话,会出现一些选项, …...

编程日记 2024/10/17 23:59:43

【建议收藏】30个Java异常的知识点，你能撑到第几个？

文章目录问题1：Error 和 Exception 区别是什么？问题2：运行时异常和一般异常(受检异常)区别是什么？问题3：JVM 是如何处理异常的？问题4：throw 和 throws 的区别是什么？问题5&#xff…...

编程日记 2024/10/17 23:58:42

【Linux系统编程】环境基础开发工具使用

目录 1、Linux软件包管理器yum 1.1 什么是软件包 1.2 安装软件 1.3 查看软件包 1.4 卸载软件 2、Linux编辑器-vim 2.1 vim的概念 2.2 vim的基本操作 2.3 vim的配置 3、Linux编译器-gcc/g 3.1 gcc编译的过程编辑编辑编辑 3.2 详解链接动态链接静态链接 4…...

编程日记 2024/10/17 23:57:41