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

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

news 2026/2/10 3:40:15

脚手架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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/2/4 12:43:08

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2026/1/23 3:36:07

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2026/1/31 4:37:40

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/2/7 10:22:16