创建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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈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