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

vue cli 自定义项目架子，vue自定义项目架子，超详细

news 文章来源：https://blog.csdn.net/weixin_54049256/article/details/138489624 2025/5/17 7:29:52

脚手架Vue CLI基本介绍：

  1. Vue CLI 是Vue官方提供的一个全局命令工具

  2. 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】

脚手架优点：

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

脚手架 VueCLI相关命令

​ 若电脑之前已经安装过vue-cli了，但是版本过低，比方说当前vue-cli的版本为2.9.6，然后我想升级到vue-cli的最新版本4.0.5，则需要将旧版本卸载，然后再重新安装@vue/cli

vue-cli：vue3.0之前版本使用此名称
@vue/cli：vue3.0之后版本包括3.0版本使用此名称

卸载脚手架

npm 和 yarn 指令

//卸载3.0之前的版本
npm uninstall -g vue-cli
yarn global remove vue-cli
//卸载3.0之后的版本（可以统一使用此指令卸载）
npm uninstall -g @vue/cli
yarn global remove @vue/cli

安装脚手架

全局安装 npm 和 yarn 指令

npm install -g @vue/cli
// 或者
yarn global add @vue/cli

查看所有版本号

//查询3.0之前的版本
npm view vue-cli versions --json
//查询3.0之后的版本
npm view @vue/cli versions --json

安装指定版本

全局安装 npm 和 yarn 指令

//安装2.9.6版本
npm install -g vue-cli@2.9.6
yarn global add vue-cli@2.9.6
//安装3.0.3版本
npm install -g @vue/cli@3.0.3
yarn global add @vue/cli@3.0.3
//安装4.0.5版本
npm install -g @vue/cli@4.0.5
yarn global add @vue/cli@4.0.5

查看当前版本号和帮助信息

vue -V 或 vue --version
vue -h 或 vue --help

创建项目架子

命令

// 项目名不能使用中文
vue create project-name

启动项目

启动项目命令

yarn serve 
// 或者 
npm run serve  // 命令中的serve不固定，找package.json查看

依据package.json安装所有依赖

npm install

使用步骤

1、第一次全局安装脚手架，后面不需要再次安装

2、创建项目架子

3、启动项目

项目架子目录及文件介绍

在这里插入图片描述

main.js

// 引入vue，相当于引入vue.js，此处引入的vue.js是缺失版本，缺失缺失模板编译器，平时不用，最后打包的时候采用
import Vue from "vue"
// 导入根组件
import App from "./App.vue"// 关闭生产提示信息
Vue.config.productionTip = false// 导入插件
import plugins1 from "@/plugins"
// 注册插件
Vue.use(plugins1, 1, 2, 3)// 创建实例
const vm = new Vue({
// render函数会被自动调用，被调用的时候，会自动传入一个参数，这个参数可以用来创建元素render: (h) => h(App),
});
vm.$mount("#app")

vue.config.js

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({// 为true，对于低级浏览器，会把node_modules里用得到的高级语法进行babel编译// 为false 则会把node_modules里用到的高级语法原封不动的打包(无视browserslist范围)，会造成在低级浏览器访问报错的情况transpileDependencies: false,// 保存时是否进行语法检查，true检查，false表示不检查lintOnSave: false,// 配置main.js入口文件pages: {index: {// 配置main.js入口文件的文件名entry: "src/main.js",},},
});

jsconfig.json

{"compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {// 配置@的路径为src"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]}
}

index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><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><!-- noscript b当浏览器禁用或不支持Javascript时添加提示信息 --><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>

自定义创建项目架子

选择自定义版本

在这里插入图片描述

选择需要的配置

在这里插入图片描述

选择vue版本

在这里插入图片描述

路由模式配置

历史模式不带号，哈希（hash）模式带#号，我们现在不需要使用历史模式，历史模式需要后台去配合，所以我们选择n

在这里插入图片描述

选择预css预编译器

在这里插入图片描述

选择eslint语法规范

  • eslint是代码规范的检验工具，检验代码是否符合规范
  • 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

在这里插入图片描述

语法规则校验时机

在这里插入图片描述

配置文件存放位置

基本上单独存放，便于管理，都放在package.json中太繁杂

在这里插入图片描述

保存配置为下次的预设

在这里插入图片描述

相关文章：

vue cli 自定义项目架子，vue自定义项目架子，超详细

脚手架Vue CLI基本介绍&#xff1a; Vue CLI 是Vue官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】 脚手架优点&#xff1a; 开箱即用&#xff0c;零配置内置babel等工具标准化的webpack配置 脚手架 VueCLI相关命令…...

编程日记 2024/5/13 18:16:34

flink cdc，读取datetime类型

:flink cdc&#xff0c;读取datetime类型&#xff0c;全都变成了时间戳 Flink CDC读取MySQL的datetime类型时会转换为时间戳的问题&#xff0c;可以通过在Flink CDC任务中添加相应的转换器来解决。具体来说&#xff0c;可以在MySQL数据源的debezium.source.converter配置项中指…...

编程日记 2024/5/13 18:15:32

Kotlin 编译器和工具链：深入解析与实践案例

Kotlin 编译器和工具链是构建 Kotlin 项目的核心组件&#xff0c;它们负责将 Kotlin 代码转换为可在 JVM 或 JavaScript 环境中运行的代码。本文将详细介绍 Kotlin 编译器和工具链的工作原理、使用方法&#xff0c;以及在实际开发中的应用案例。 1. 引言 Kotlin 作为一种现代…...

编程日记 2024/5/13 18:14:31

kettle

文章目录 读取共享数据库连接报错 读取共享数据库连接报错 读取共享数据库连接报错 解决方法&#xff1a;修改共享文件中的中文字符&#xff0c;文件位置一般是默认的&#xff1a;C:\Users\Administrator.kettle。将shared.xml文件中的中文字符改成英文后问题就解决了。...

编程日记 2024/5/13 18:12:28

Maven 自动化构建

优质博文&#xff1a;IT-BLOG-CN 一、Maven&#xff1a;是一款服务于 Java平台的自动化构建工具 【1】Maven可以将一个项目按模块划分成不同的工程&#xff0c;利于分工协作; 【2】Maven可以将 jar包保存在自己的中央“仓库”中进行统一管理&#xff0c;有需要使用的工程引用这…...

编程日记 2024/5/13 18:11:27

Unicode字符集和UTF编码

文章目录 前言一、字符集和编码方式二、unicode字符集utf32编码utf8编码utf8编码函数示例utf8解码函数示例 utf16编码utf16编码解码函数示例 总结 前言 本文详细介绍 u n i c o d e unicode unicode 字符集和其相关的三种编码方式&#xff1a; u t f 8 utf8 utf8&#xff0c;…...

编程日记 2024/5/13 18:10:26

echarts默认图例(横线+圈圈)

修改echarts 图例样式 项目里折线图需要去掉圆点, 但是图例样式需要是默认样式(横线和圈圈) 原始代码:(只展示series 和legend配置 ) series: [{name: chartObj.names[ind_one],yAxisIndex: yIndex,type: ele_one,barMaxWidth: 15,tooltip: {show: true},data: chartObj.yAx…...

编程日记 2024/5/13 18:08:23

Shell脚本的基础和变量

1.shell脚本基础 1.1 shell的作用 Linux 系统中的 Shell 是一个特殊的应用程序&#xff0c;它介于操作系统内核与用户之间&#xff0c;充当 了一个“命令解释器”的角色&#xff0c;负责接收用户输入的操作指令&#xff08;命令&#xff09;并进行解释&#xff0c;将需要执 行的…...

编程日记 2024/5/13 18:07:22

VRRP协议-负载分担配置【分别在路由器与交换机上配置】

VRRP在路由器与交换机上的不同配置 一、使用路由器实现负载分担二、使用交换机实现负载分担一、使用路由器实现负载分担 使用R1与R2两台设备分别进行VRRP备份组 VRRP备份组1，虚拟pc1的网关地址10.1.1.254 VRRP备份组2，虚拟pc2的网关地址10.1.1.253 ①备份组1的vrid=1，vrip=…...

编程日记 2024/5/13 18:06:20

商务分析方法与工具（十）：Python的趣味快捷-公司财务数据最炫酷可视化

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…...

编程日记 2024/5/13 18:05:19

思源笔记如何结合群晖WebDav实现云同步数据

文章目录 1. 开启群晖WebDav 服务2. 本地局域网IP同步测试3. 群晖安装Cpolar4. 配置远程同步地址5. 笔记远程同步测试6. 固定公网地址7. 配置固定远程同步地址 在数字化时代&#xff0c;信息的同步与共享变得尤为重要。无论是个人用户还是企业团队&#xff0c;都渴望能够实现跨…...

编程日记 2024/5/13 18:04:18

Electron Forge | 跨平台实战详解(中)

简介 上篇 介绍了 Electron 和 Electron Builder 的基本用法&#xff0c;本篇将介绍更常用也更方便的打包工具&#xff0c;Electron Forge 。 Electron Forge 是一个为 Electron 应用的开发、打包和分发而设计的全功能工具集。它整合了多个底层 Electron 工具到一个统一的命令…...

编程日记 2024/5/13 18:03:16

stable diffusion教程

Stable Diffusion 是一种流行的图像生成模型&#xff0c;它可以根据文本提示生成高质量的图片。如果你想了解如何使用 Stable Diffusion&#xff0c;这里有一些基本的步骤和资源&#xff0c;可以帮助你开始使用&#xff1a; ### 1. 安装 Stable Diffusion 首先&#xff0c;你需…...

编程日记 2024/5/13 18:01:14

音频文件分析-- whisper（python 文档解析提取）

使用whisper转文本&#xff0c;这里使用的是large-v3版本 pip install githttps://github.com/openai/whisper.git import whisper import os from tqdm import tqdmmodel whisper.load_model("large-v3")path "rag_data" for fi in tqdm(os.listdir(pa…...

编程日记 2024/5/13 17:59:12

Python深度学习基于Tensorflow（3）Tensorflow 构建模型

文章目录 数据导入和数据可视化数据集制作以及预处理模型结构低阶 API 构建模型中阶 API 构建模型高阶 API 构建模型保存和导入模型 这里以实际项目CIFAR-10为例&#xff0c;分别使用低阶&#xff0c;中阶&#xff0c;高阶 API 搭建模型。 这里以CIFAR-10为数据集&#xff0c;C…...

编程日记 2024/5/13 17:58:11

火爆多年的抖音小店，2024年想要入驻需要什么条件呢？

大家好&#xff0c;我是电商糖果 我相信现在只要会上网的年轻人&#xff0c;对抖音小店一定不会感觉陌生。 它最近几年的风头&#xff0c;可是远远超过某宝&#xff0c;某多多了。 不少抖音用户也有了在抖音购物的习惯&#xff0c;现在的抖音上入驻了上百万家电商商家。 这…...

编程日记 2024/5/13 17:56:09

STM32G030C8T6：EEPROM读写实验（I2C通信）

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;实现PB11,PB10 引脚模拟I2C 时序&#xff0c;对M24C08 的EEPRO…...

编程日记 2024/5/13 17:55:08

使用Git管理github的代码库-上

1、下载安装Git https://download.csdn.net/download/notfindjob/11451730?spm1001.2014.3001.5503 2、注册一个github的账号&#xff08;已经注册的&#xff0c;可略过这一步&#xff09; 3、打开git命令行&#xff0c;配置github账号 git config --global user.name &quo…...

编程日记 2024/5/13 17:48:58

经典文献阅读之--D-Map(无需射线投射的高分辨率激光雷达传感器的占据栅格地图)

0. 简介 占用地图是机器人系统中推理环境未知和已知区域的基本组成部分。《Occupancy Grid Mapping without Ray-Casting for High-resolution LiDAR Sensors》介绍了一种高分辨率LiDAR传感器的高效占用地图框架&#xff0c;称为D-Map。该框架引入了三个主要创新来解决占用地图…...

编程日记 2024/5/13 17:45:54

开源免费的定时任务管理系统：Gocron

Gocron&#xff1a;精准调度未来&#xff0c;你的全能定时任务管理工具&#xff01;- 精选真开源&#xff0c;释放新价值。 概览 Gocron是github上一个开源免费的定时任务管理系统。它使用Go语言开发&#xff0c;是一个轻量级定时任务集中调度和管理系统&#xff0c;用于替代L…...

编程日记 2024/5/13 17:43:52

从零开始详解OpenCV车道线检测

前言 车道线检测是智能驾驶和智能交通系统中的重要组成部分&#xff0c;对于提高道路安全、交通效率和驾驶舒适性具有重要意义。在本篇文章中将介绍使用OpenCV进行车道线的检测 详解 导入包 import cv2 import matplotlib.pyplot as plt import numpy as np读入图像并灰度化…...

编程日记 2024/5/13 17:42:51

【Java代码审计】逻辑漏洞篇

【Java代码审计】逻辑漏洞篇 逻辑漏洞概述常见逻辑漏洞点 逻辑漏洞概述 逻辑漏洞一般是由于源程序自身逻辑存在缺陷&#xff0c;导致攻击者可以对逻辑缺陷进行深层次的利用。逻辑漏洞出现较为频繁的地方一般是登录验证逻辑、验证码校验逻辑、密码找回逻辑、权限校验逻辑以及支…...

编程日记 2024/5/13 17:41:49

SSH简介

SSH&#xff0c;全名叫Secure Shell&#xff0c;你可以想象它是一个超级安全的管道&#xff0c;专门用来远程操控电脑的。就好比你在家用遥控器指挥远处的电视换台&#xff0c;但比这高级多了&#xff0c;因为它是专门为电脑设计的。 为什么需要SSH&#xff1f; 在互联网的早期…...

编程日记 2024/5/13 17:40:47

Oracle的高级分组函数grouping和grouping_id

在网上对Oracle的高级分组函数grouping和grouping_id的讲解并不多，特别是grouping_id，还有解说有误的。经过1天研究，已经完全掌握了两个函数的作用和用法，下面简单的讲述即可明白。下面给大家分享。 GROUPING 函数 语法：grouping(表达式) 作用： GROUPING将超聚…...

编程日记 2024/5/13 17:37:43

SqlServer 查询数据库 和 数据表 大小的语句

–Sqlserver 查询数据库 大小 SELECT * FROM (SELECT DB_NAME(database_id) AS DatabaseName,type_desc AS FileType,name AS FileName,size * 8 / 1024/1024 AS FileSizeGBFROM sys.master_filesWHERE type 0 -- 数据文件AND state 0 -- 在线状态 ) T1 ORDER BY FileSizeG…...

编程日记 2024/5/13 17:34:38

特殊类的设计与单例模式

1、特殊类的设计 如何设计出一个创建出的对象只能在堆上的类&#xff1f;将类的默认构造函数设置为私有&#xff0c;再将类的拷贝构造函数设置为delete&#xff0c;设置静态函数GetObj&#xff0c;内部调用new HeapOnly&#xff0c;这样就只能在堆上开辟空间。 class HeapOnly…...

编程日记 2024/5/13 17:33:37

MySQL从入门到高级 --- 6.函数

文章目录 第六章&#xff1a;6.函数6.1 聚合函数6.2 数学函数6.3 字符串函数6.4 日期函数6.4.1 日期格式 6.5 控制流函数6.5.1 if逻辑判断语句6.5.2 case when语句 6.6 窗口函数6.6.1 序号函数6.6.2 开窗聚合函数6.6.3 分布函数6.6.4 前后函数6.6.5 头尾函数6.6.6 其他函数6.7 …...

编程日记 2024/5/13 17:32:36

Qt---信号和槽

一、信号和槽机制 所谓信号槽&#xff0c;实际就是观察者模式。当某个事件发生之后&#xff0c;比如&#xff0c;按钮检测到自己被点击了一下&#xff0c;它就会发出一个信号&#xff08;signal&#xff09;。这种发出是没有目的的&#xff0c;类似广播。如果有对象对这个信号…...

编程日记 2024/5/13 17:31:34

POCEXP编写—文件上传案例

POC&EXP编写—文件上传案例 1. 前言2. 文件上传案例2.1. Burp抓包2.2. 基础代码实践2.2.1. 优化代码 2.3. 整体代码2.3.1. 木马测试 1. 前言 之前的文章基本上都是一些相对来说都是验证类的或者说是一些代码执行类的&#xff0c;相对来说都不是太复杂&#xff0c;而这篇会…...

编程日记 2024/5/13 17:27:29

C#知识|上位机UI设计-详情窗体设计思路及流程（实例）

哈喽，你好啊，我是雷工！ 上两节练习记录了登录窗体和主窗体的实现过程，本节继续练习内容窗体的实现，以下为练习笔记。 01 详情窗体效果展示： 02 添加窗体并设置属性 在之前练习项目的基础上添加一个Windows窗体，设置名称为：FrmIPManage.cs 设置窗体的边框和标题栏的外…...

编程日记 2024/5/13 17:26:28