創建Vue項目的不同方式及項目規范化配置

1 項目的創建與運行

1.1 基于webpack構建工具——vue-cli腳手架

1. 安裝腳手架 ：npm i -g @vue/cli  		# 安裝一次即可，之前安裝過則無需重復安裝
2. 切換到項目所在目錄 ：cd 項目所在目錄
3. 創建項目 ：vue create 項目名
4. 自定義相關配置
5. 進入項目 ：cd 項目名
6. 運行項目 ：npm run serve

上述步驟4的相關配置創建步驟如下所示————

【1】選擇自定義創建

在這里插入圖片描述

【2】選擇項目所需功能

在這里插入圖片描述

【3】選擇Vue版本以及對應的路由模式

在這里插入圖片描述

【4】選擇css預處理方式

在這里插入圖片描述

【5】選擇eslint校驗方式（通常采用無分號模式）

在這里插入圖片描述

【6】選擇校驗時機

在這里插入圖片描述

【7】選擇配置文件的生成方式

在這里插入圖片描述

【8】是否保存預設，下次直接使用？ => 不保存，輸入 N

在這里插入圖片描述

1.2 基于Vite構建工具——Vite

1. npm init vite-app 項目名
2. 選擇開發框架：輸入 Vue 并按回車，選擇 Vue 作為開發框架。
3. 選擇版本：默認為 Vue 3，直接按回車確認即可。
4. 選擇是否需要 TypeScript：根據需求選擇 Yes 或 No；如果不需要 TypeScript，選擇 No
5. 啟動項目：cd 項目名npm run dev

1.3 基于Vite構建工具——create-vue腳手架 【推薦】

1. 切換到項目所在目錄：cd 項目所在目錄
2. 安裝/初始化腳手架：npm init vue@latest   ## npm create vue@latest 是其別名，與之作用相同
3. 自定義相關配置
4. 進入項目：cd 項目名
5. 初始化：npm i
6. 運行項目：npm run dev

上述步驟3的相關配置創建步驟如下所示————

【1】設置項目名

在這里插入圖片描述

【2】設置package name

在這里插入圖片描述
何為package name

作用作為項目的唯一標識，當你將項目發布到 npm 倉庫時，其他開發者可通過此名稱安裝你的包（例如 npm install your-package-name）。在代碼中導入模塊時，若項目被用作庫（Library），package.name 會影響模塊的導入路徑（例如 import { xxx } from 'your-package-name'）。與 Project Name 的區別Project Name：是你創建的項目文件夾名稱（例如 my-vue-app），對應項目根目錄的文件夾名。Package Name：是 package.json 中的 name 屬性，可獨立于項目文件夾名設置（但通常建議保持一致，避免混淆）。命名規則不能包含大寫字母；不能以點（.）、下劃線（_）或數字開頭；不能包含空格或特殊字符（如 @, :, / 等）；建議使用短橫線（-）分隔單詞（例如 vue3-big-event-admin）

【3】勾選項目所需配置

在這里插入圖片描述

【4】 進入項目目錄并進行初始化安裝

在這里插入圖片描述

2 通過其他包管理工具命令的使用方式

2.1 安裝依賴

操作場景					npm							yarn							pnpm
安裝項目依賴			npm install						yarn						pnpm install
添加新依賴			npm install <package>		yarn add <package>				pnpm add <package>
全局安裝				npm install -g <package>	yarn global add <package>		pnpm add -g <package>
卸載依賴				npm uninstall <package>		yarn remove <package>			pnpm remove <package>

2.2 創建Vue項目

2.2.1 使用vue-cli腳手架

工具								命令
npm			安裝：npm i -g @vue/cli + 創建：vue create 項目名
yarn		安裝：yarn global add @vue/cli + 創建：vue create 項目名
pnpm		安裝：pnpm add -g @vue/cli + 創建：vue create 項目名

2.2.2 使用create-vue腳手架

工具								命令
npm				npm create vue@latest 或 npm init vue@latest
yarn							yarn create vue
pnpm							pnpm create vue

2.3 運行項目及其他相關命令

2.3.1 使用vue-cli腳手架

操作					npm								yarn								pnpm
運行開發服務器		npm run serve					yarn serve							pnpm serve
構建生產版本			npm run build					yarn build							pnpm build
運行代碼檢查			npm run lint					yarn lint							pnpm lint

2.3.2 使用create-vue腳手架

操作					npm								yarn								pnpm
運行開發服務器		npm run dev							yarn dev							pnpm dev
構建生產版本			npm run build						yarn build							pnpm build
運行代碼檢查			npm run lint						yarn lint							pnpm lint

3 項目規范化配置

3.1 項目的初始架構【以create-vue創建的Vue3項目為例】

在這里插入圖片描述

3.2 ESLint & prettier 配置代碼風格

規范如下————

1. prettier 風格配置 詳見： [https://prettier.io](https://prettier.io/docs/en/options.html )[1]. 字符串統一采用單引號[2]. JS語句不使用分號結尾[3]. 每行寬度至多80字符[4]. <對象 | 數組>類型的數據，最后一個 <鍵值對 | 元素> 后不加逗號[5]. 不限制換行符號（因為win mac 不一致）2. vue組件名稱統一多單詞組成，但設置忽略index.vue的限制3. 支持props解構

① 根據上述規范，在 配置文件 .eslintrc.cjs 中添加如下配置————

rules: {'prettier/prettier': ['warn',{singleQuote: true, // 單引號semi: false, // 無分號printWidth: 80, // 每行寬度至多80字符trailingComma: 'none', // 不加對象|數組最后逗號endOfLine: 'auto' // 換行符號不限制（win mac 不一致）}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue組件名稱多單詞組成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 關閉 props 解構的校驗// 💡 添加未定義變量錯誤提示'no-undef': 'error'}

注意：這里的prettier并不是指vscode中安裝的插件，如果已安裝，需要禁用它
在這里插入圖片描述
在這里插入圖片描述

② 安裝 <Eslint> VScode插件，并配置保存時自動修復并且關閉format on save
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
如此一來，當我們代碼不規范時，eslint就會進行波浪線提示，但是ctrl+s保存后prettier又會自動為我們糾正規范

3.3 基于 husky 的代碼檢查工作流

該工具會在代碼提交（git commit）前先進行檢查，防止代碼不規范或有錯誤卻被提交

3.3.1 初始化倉庫

git init
在這里插入圖片描述

3.3.2 初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install
在這里插入圖片描述
在這里插入圖片描述

3.3.3 修改 .husky/pre-commit 文件

在這里插入圖片描述

3.3.4 lint-staged 配置

由于以上默認進行的是全量檢查，會有所耗時，因此，我們需要配置暫存區檢查
步驟如下————
【1】安裝
pnpm i lint-staged -D

【2】配置 package.json

{// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
}{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
}

【3】修改 .husky/pre-commit 文件
將原先的 pmpm lint 改為 pnpm lint-staged

3.3.5 調整目錄結構

刪除一些不必要的文件，在src文件夾中新增兩個文件夾 <api>和 <utils>
api文件夾用于封裝axios接口請求
utils用于存放工具函數
在assets文件夾中，可存放全局圖片和全局樣式，樣式在main.js文件中導入即可
如果要采用scss進行樣式的書寫，要安裝預處理器sass：pnpm add sass

3.3.6 引入 element-ui 組件庫

【1】安裝
pnpm add element-plus

【2】配置自動按需導入

【2.1】安裝插件
pnpm add -D unplugin-vue-components unplugin-auto-import

【2.2】把以下代碼加入vite.config.js配置文件

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [...AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]
})

配置好后，后續直接使用組件即可
在這里插入圖片描述
注意：配置后，在src/components中的組件，如需使用，可不用導入和注冊即可直接使用
注意：如果只使用了setup語法糖，只是能夠免去component注冊這個步驟，import導入是必需的
如果使用了setup語法糖且進行了以上配置，那么，使用到的組件可無需注冊，但需導入，而component文件夾下的組件可無需注冊和導入

3.3.7 使用Pinia

示例
在這里插入圖片描述

【1】配置數據持久化

【1.1】安裝插件 pinia-plugin-persistedstate
pnpm add pinia-plugin-persistedstate -D

【1.2】在main.js中導入注冊

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

【1.3】在對應store文件中配置
在這里插入圖片描述

【1.4】配置倉庫統一管理

在src/stores文件夾中，創建module文件夾以及index.js文件modules文件夾用于存放不同作用的storeindex.js文件中初始化pinia，并將其他模塊下的store統一在這個文件中導出，當我們需要導入不同模塊的store時，
統一直接 import { xxx } from '@/stores' 即可，無需指定哪個模塊的store的具體路徑

在這里插入圖片描述
如此一來，在main.js文件中，直接導入index.js文件即可，將初始化pinia交由index.js; 將不同模塊的導出統一交由index.js，導入直接統一 import { xxx } from '@/stores' 即可

3.3.8 封裝axios接口請求

【1】安裝axios
pnpm add axios

【2】在 utils/request.js 中配置請求攔截器/響應攔截器

【2.1】基本架子

import axios from 'axios'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基礎地址，超時時間
})instance.interceptors.request.use((config) => {// TODO 2. 攜帶tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// TODO 3. 處理業務失敗// TODO 4. 摘取核心響應數據return res},(err) => {// TODO 5. 處理401錯誤return Promise.reject(err)}
)export default instance

【2.2】示例

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({baseURL,timeout: 100000
})
// 請求攔截器
instance.interceptors.request.use((config) => {const userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)
// 響應攔截器
instance.interceptors.response.use((res) => {if (res.data.code === 0) {return res}ElMessage({ message: res.data.message || '服務異常', type: 'error' })return Promise.reject(res.data)},(err) => {ElMessage({ message: err.response.data.message || '服務異常', type: 'error' })console.log(err)if (err.response?.status === 401) {router.push('/login')}return Promise.reject(err)}
)export default instance
export { baseURL }

3.3.9 路由懶加載

在這里插入圖片描述

3.3.10 element-plus中的表單校驗

【1】結構示例

<template><el-row class="login-page"><el-col :span="12" class="bg"></el-col><el-col :span="6" :offset="3" class="form"><el-form ref="form" size="large" autocomplete="off" v-if="isRegister"><el-form-item><h1>注冊</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item><el-input:prefix-icon="Lock"type="password"placeholder="請輸入密碼"></el-input></el-form-item><el-form-item><el-input:prefix-icon="Lock"type="password"placeholder="請輸入再次密碼"></el-input></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>注冊</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = false">← 返回</el-link></el-form-item></el-form><el-form ref="form" size="large" autocomplete="off" v-else><el-form-item><h1>登錄</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item><el-inputname="password":prefix-icon="Lock"type="password"placeholder="請輸入密碼"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>記住我</el-checkbox><el-link type="primary" :underline="false">忘記密碼？</el-link></div></el-form-item><el-form-item><el-button class="button" type="primary" auto-insert-space>登錄</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注冊 →</el-link></el-form-item></el-form></el-col></el-row>
</template>

元素說明
el-form 整個表單組件
el-form-item 表單的一行 (一個表單域)
el-input 表單元素(輸入框)

【1.2】需求假設

1. 用戶名非空，長度校驗5-10位
2. 密碼非空，長度校驗6-15位
3. 再次輸入密碼，非空，長度校驗6-15位

【1.3】實現步驟

【1.3.1】el-form 中要綁定的數據

:model="ruleForm"  		# 綁定的整個form的數據對象
:rules="rules"			# 綁定的整個form的規則對象示例：# 數據對象
const formModel = ref({username: '',password: '',repassword: ''
})# 規則對象
const rules = {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 5, max: 10, message: '用戶名必須是5-10位的字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密碼必須是6-15位的非空字符',trigger: 'blur'}],repassword: [{ required: true, message: '請再次輸入密碼', trigger: 'blur' },{pattern: /^\S{6,15}$/,message: '密碼必須是6-15的非空字符',trigger: 'blur'},{validator: (rule, value, callback) => {if (value !== formModel.value.password) {callback(new Error('兩次輸入密碼不一致!'))} else {callback()}},trigger: 'blur'}]
}# 進行綁定
<el-form :model="formModel"  :rules="rules">

【1.3.2】el-form-item 中要綁定的數據

props  配置生效的是ruls中的哪個校驗規則示例：<el-form-item prop="username"><el-inputv-model="formModel.username":prefix-icon="User"placeholder="請輸入用戶名"></el-input>
</el-form-item>
... 
(其他兩個也要綁定prop)

【1.3.3】表單元素 中要綁定的數據

v-model="form的數據對象.xxx" 	給表單元素綁定form數據對象的子屬性示例：<el-inputv-model="formModel.username":prefix-icon="User"placeholder="請輸入用戶名"
></el-input>
... 
(其他兩個也要綁定)

【1.3.4】對整個表單進行預校驗
使用到el-form組件對外暴露的方法：validate
在這里插入圖片描述
步驟如下
① 通過ref屬性獲取el-form組件對象
在這里插入圖片描述
② 綁定事件以觸發全表單預校驗
在這里插入圖片描述
在這里插入圖片描述

【1.4】校驗規則中的字段說明

非空校驗required:true 不允許為空message 消息提示trigger 觸發校驗的時機 值為 blur（失焦時觸發）或 change（值改變時觸發）長度校驗 min:xx 	允許的最小長度max:xx	允許的最大長度正則校驗 pattern:正則規則自定義校驗validator 可定義校驗的函數函數中有三個參數(rule,value,callback) (1) rule 表示當前校驗規則相關的信息(2) value 所校驗的表單元素目前的表單值(3) callback 無論成功還是失敗，都需要:callback 回調callback()						校驗成功callback(new Error(錯誤信息))	校驗失敗

3.3.11 基于axios封裝接口請求

示例
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/93993.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/93993.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/93993.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

K距離間隔重排字符串 (LeetCode 358) — Swift解法 + 可運行Demo

K距離間隔重排字符串 (LeetCode 358) — Swift解法 + 可運行Demo

文章目錄摘要描述解決方法分析問題和解決代碼代碼要點詳解示例測試和結果時間復雜度空間復雜度總結摘要 這道題的核心是&#xff1a;把字符串里的字符重新排一下順序&#xff0c;讓相同字符之間至少隔開 k 個位置。如果做不到&#xff0c;就返回空串。看上去像“排座位”&…
閱讀更多...
React native Navigation 詳解

React native Navigation 詳解

Tab Navigator（標簽導航器） 概念 Tab Navigator 是 React Navigation 中用于創建底部或頂部標簽欄導航的組件。它允許用戶在不同的屏幕之間快速切換，每個標簽對應一個獨立的屏幕。 基本用法 import {createBottomTabNavigator } from @react-navigation/bottom-tabs; im…
閱讀更多...
[GraphRAG]完全自動化處理任何文檔為向量知識圖譜：AbutionGraph如何讓知識自動“活”起來？

[GraphRAG]完全自動化處理任何文檔為向量知識圖譜：AbutionGraph如何讓知識自動“活”起來？

在當今信息爆炸的時代&#xff0c;企業和研究人員面對大量非結構化文檔時&#xff0c;如何高效地提取、存儲和查詢其中的知識&#xff0c;已成為一個核心挑戰。傳統的關鍵詞檢索早已無法滿足深層次語義關聯和智能問答的需求。 每天面對成百上千份PDF論文、Excel報告、行業白皮…
閱讀更多...
模擬tomcat接收GET、POST請求

模擬tomcat接收GET、POST請求

訪問&#xff1a; http://localhost:10086/mytomcatMyTomcat/ └── src/└── com/└── zhang/├── MyServer.java├── MyRequest.java├── MyResponse.java├── MyMapping.java├── MyServlet.java└── MyHttpServlet.java核心類功能說明 MyServer.java 服務…
閱讀更多...
氯化釔：科技與高性能材料的核心元素

氯化釔：科技與高性能材料的核心元素

氯化釔是釔元素的氯化物&#xff0c;廣泛應用于高性能材料、催化劑、光電技術等領域。作為稀土元素之一&#xff0c;釔因其獨特的物理和化學特性&#xff0c;在現代工業中具有重要地位&#xff0c;而氯化釔則是其中的關鍵化合物之一。氯化釔的優勢與特點1. 化學穩定性強氯化釔具…
閱讀更多...
【數據結構初階】--排序(五)：計數排序，排序算法復雜度對比和穩定性分析

【數據結構初階】--排序(五)：計數排序，排序算法復雜度對比和穩定性分析

&#x1f618;個人主頁&#xff1a;Cx330? &#x1f440;個人簡介&#xff1a;一個正在努力奮斗逆天改命的二本覺悟生 &#x1f4d6;個人專欄&#xff1a;《C語言》《LeetCode刷題集》《數據結構-初階》 前言&#xff1a;今天這篇博客就給大家將一個計數排序&#xff0c;然乎就…
閱讀更多...
Incredibuild 新增 Unity 支持：擊破構建時間過長的痛點

Incredibuild 新增 Unity 支持：擊破構建時間過長的痛點

任何開發過復雜 Unity 項目的團隊都會告訴你&#xff1a;構建速度已成為生產流程中的核心痛點。Unity 靈活且強大&#xff0c;但隨著項目規模擴大&#xff08;尤其是包含 3D 資源、復雜著色器和龐大內容管線的項目&#xff09;&#xff0c;構建過程會逐漸變成一項隱性成本。 多…
閱讀更多...
大數據接口 - 收入評估(社保評級)API

大數據接口 - 收入評估(社保評級)API

請求端點 {"post": "https://api.tianyuanapi.com/api/v1/JRZQ09J8?t13位時間戳" }請求頭字段名類型必填描述Access-Idstring是賬號的 Access-Id對于業務請求參數 通過加密后得到 Base64 字符串&#xff0c;將其放入到請求體中&#xff0c;字段名為 data&…
閱讀更多...
C++八股 —— 設計模式

C++八股 —— 設計模式

文章目錄一、創建型模式1. 單例模式2. 工廠模式二、結構型模式1. 裝飾器模式2. 代理模式三、行為型模式1. 觀察者模式2. 策略模式一、創建型模式 1. 單例模式 C八股 —— 單例模式_c 單例模式-CSDN博客 2. 工廠模式 參考&#xff1a;【設計模式】工廠模式詳解-----簡單工廠…
閱讀更多...
在openeuler中如何使用 firewalld 開放指定端口

在openeuler中如何使用 firewalld 開放指定端口

在 OpenEuler 中使用 firewalld 開放指定端口的操作步驟如下&#xff0c;需區分臨時開放&#xff08;重啟后失效&#xff09;和永久開放&#xff08;重啟后保留&#xff09;兩種場景&#xff1a;一、查詢端口當前狀態首先確認端口是否已開放&#xff0c;避免重復配置&#xff1…
閱讀更多...
【Java進階】Java JIT 編譯器深度解析與優化實踐

【Java進階】Java JIT 編譯器深度解析與優化實踐

Java JIT 編譯器深度解析與優化實踐Java JIT 編譯器深度解析與優化實踐一、JIT 編譯器核心原理1. JIT 工作流程2. 熱點代碼檢測機制二、Java 8 JIT 優化升級1. 分層編譯優化2. 方法內聯增強3. 循環優化升級4. 逃逸分析增強5. 向量化支持三、JIT友好代碼設計原則1. 方法設計優化…
閱讀更多...
【本地部署問答軟件Apache Answer】Answer開源平臺搭建：cpolar內網穿透服務助力全球用戶社區構建

【本地部署問答軟件Apache Answer】Answer開源平臺搭建：cpolar內網穿透服務助力全球用戶社區構建

文章目錄前言1. 本地安裝Docker2. 本地部署Apache Answer2.1 設置語言選擇簡體中文2.2 配置數據庫2.3 創建配置文件2.4 填寫基本信息3. 如何使用Apache Answer3.1 后臺管理3.2 提問與回答3.3 查看主頁回答情況4. 公網遠程訪問本地 Apache Answer4.1 內網穿透工具安裝4.2 創建遠…
閱讀更多...
華為數通認證學習

華為數通認證學習

1、華為人才認證官網&#xff0c;https://e.huawei.com/cn/talent/portal/#/ 很全面的網站&#xff0c;包含了概述、了解認證、參加考試、學習資源、認證資訊四個板塊。可以了解華為認證的整個流程、下載學習資源&#xff08;培訓教材、視頻課程等&#xff09;&#xff0c;以及…
閱讀更多...
Android-ContentProvider的跨應用通信學習總結

Android-ContentProvider的跨應用通信學習總結

一、ContentProvider的概念1. ContentProvider 是什么&#xff1f;&#xff08;核心概念&#xff09;ContentProvider 是 Android 四大組件之一。它的核心職責是管理和共享應用的結構化數據。我們可以把它想象成一個應用的**“數據大使館”**。在一個國家里&#xff08;Android…
閱讀更多...
Java數據結構第二十六期：解密位圖，海量數據處理的 “空間魔法”

Java數據結構第二十六期：解密位圖，海量數據處理的 “空間魔法”

專欄&#xff1a;Java數據結構秘籍 個人主頁&#xff1a;手握風云 目錄 一、位圖 1.1. 概念 1.2. 面試題 1.3. 位圖的實現 1.4. 位圖的應用 一、位圖 1.1. 概念 在數據結構中&#xff0c;位圖&#xff08;也稱為位數組、位向量或位集&#xff09;是一種緊湊的方式來表示一…
閱讀更多...
芯科科技即將重磅亮相IOTE 2025深圳物聯網展，以全面的無線技術及生態覆蓋賦能萬物智聯

芯科科技即將重磅亮相IOTE 2025深圳物聯網展，以全面的無線技術及生態覆蓋賦能萬物智聯

作為低功耗無線連接領域的創新性領導廠商&#xff0c;Silicon Labs&#xff08;亦稱“芯科科技”&#xff09;將于8月27至29日攜其最前沿的人工智能&#xff08;AI&#xff09;和物聯網&#xff08;IoT&#xff09;解決方案在深圳舉辦的IOTE 2025國際物聯網展中盛大展出。這場亞…
閱讀更多...
Linux上安裝多個JDK版本，需要配置環境變量嗎

Linux上安裝多個JDK版本，需要配置環境變量嗎

簡短回答&#xff1a;不需要同時配置多個 JDK 的 JAVA_HOME 和 PATH&#xff0c;但你可以安裝多個版本&#xff0c;并通過靈活的方式在它們之間切換。 文章目錄? 正確做法&#xff1a;安裝多個 JDK&#xff0c;但只讓一個生效&#xff08;通過環境變量或 alternatives&#xf…
閱讀更多...
MySQL有哪些高可用方案

MySQL有哪些高可用方案

大家好&#xff0c;我是鋒哥。今天分享關于【MySQL有哪些高可用方案】面試題。希望對大家有幫助&#xff1b; MySQL有哪些高可用方案? 超硬核AI學習資料&#xff0c;現在永久免費了&#xff01; MySQL 高可用方案是指確保 MySQL 數據庫在面對硬件故障、網絡故障、負載過重等…
閱讀更多...
【Windows】Windows平臺基于加速地址安裝vcpkg并集成到Visual Studio 2017

【Windows】Windows平臺基于加速地址安裝vcpkg并集成到Visual Studio 2017

基礎運行環境 啟動&#xff1a; 適用于 VS 2017 的 x64 本機工具命令提示 ninja 下載壓縮包 https://gh-proxy.com/https:/github.com/ninja-build/ninja/releases/download/v1.13.1/ninja-win.zip 直接解壓到c:/Windows (無需配置環境變量) CMake 下載安裝包 https://gh-proxy…
閱讀更多...
LLMs之MCP：Chrome MCP的簡介、安裝和使用方法、案例應用之詳細攻略

LLMs之MCP：Chrome MCP的簡介、安裝和使用方法、案例應用之詳細攻略

LLMs之MCP&#xff1a;Chrome MCP的簡介、安裝和使用方法、案例應用之詳細攻略 目錄 Chrome MCP的簡介 1、特點 2、與類似項目的比較 Chrome MCP的安裝和使用方法 1、安裝 2、使用方法 加載 Chrome 擴展 與 MCP 協議客戶端一起使用 使用 STDIO 連接&#xff08;替代方…
閱讀更多...
最新文章

Copyright @ 2022~2023