Vue3项目搭建准备（二）

最新推荐文章于 2025-03-26 10:27:55 发布
原创 最新推荐文章于 2025-03-26 10:27:55 发布 · 244 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细指导如何从GitHub下载Vuedevtools v6.0.0-beta.15，包括安装依赖、打包过程，以及如何将其作为Chrome插件部署。提供完整步骤和优快云资源链接。

安装vue devtools

下载vue devtools

打开 GitHub 网址找到 vue devtools ,这里选择了 v6.0.0-beta.15， 目前此版本支持 Vue3，下载ZIP文件

https://github.com/vuejs/devtools/tree/v6.0.0-beta.15

在这里插入图片描述

安装依赖

使用 VSCode 打开下载的代码，执行命令安装相关依赖

yarm install

打包

执行完上述命令后，再执行下面命令打包文件

yarm run build

安装插件

打开 Chrome 浏览器，进入到扩展程序页面
在这里插入图片描述
打开 开发者模式，选择 加载已解压的扩展程序 后，打开上面下载来的 vue devtools-6.0.0-beta.15 的文件，找到目录下的 packages 文件夹下的 shell-chrome 文件夹即可。

csdn资源下载链接

下载地址，直接解压就是 shell-chrome文件夹

[架构之美]手动搭建Vue3 前端项目框架
曼岛_的博客
07-15 906
[架构之美]手动搭建Vue3 前端项目框架
Vue 3 CLI TypeScript 项目搭建全攻略
qq_22232065的博客
08-29 1218
其次，对于 Vue CLI 的安装和更新，如果您之前尚未安装 Vue CLI，或者您安装的是旧版本（1.x 或 2.x），则需要先进行卸载。在代码提交前，还可以进行分支合并前的代码审查，使用流行的代码审查工具如 GitHub 的 Code Review 等，提高代码质量。规范 commit 的信息，使用简洁明了的格式，方便跟踪和管理代码。但需要注意的是，默认配置可能无法完全满足您的特定需求，如果您的项目有特殊的要求，比如需要特定的 CSS 预处理器、路由模式、状态管理等，默认配置可能就不太适用。
vue3项目（一）项目前的准备
m0_61368323的博客
05-10 547
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。在styles文件夹里创建element文件，里面创建index.scss文件，里面引入如下的样式。在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。3）通知Element采用scss语言，然后导入定制的scss文件覆盖。分类页和Home都是首页中进行切换，所以是首页的子路由。2）在vite.config.js中配置自动导入。
Vue3项目搭建准备（一）
coolchaobing的博客
11-04 161
vue3环境搭建 安装、配置nodejs环境 查看地址 安装或升级vue脚手架 全局安装脚手架 npm install @vue/cli -g 升级脚手架 npm update @vue/cli -g
11、vue3项目开发前的准备工作
伦伦的博客
08-20 1148
vue3项目开发的准备工作 一、安装环境 1、安装node 2、安装cnpm或者配置淘宝镜像源 3、安装vue脚手架 4、安装开发工具 5、安装git或者svn 6、安装postman 二、使用vue脚手架创建项目 1、使用vue-cli创建项目 如：vue create 项目名称 2、使用可视化工具创建项目 如：在终端输入vue ui进入可视化工具 三、安装项目中所需要的插件并且进行相关配置 1、安装axios npm install axios --save //安装 2、安装ui组件element-
Vue3项目搭建全过程
qq_52013792的博客
07-23 1万+
vue3项目搭建一条龙
vue3项目搭建超详解
扶摇直上
05-13 4727
vue3安装与目录讲解 文章目录vue3安装与目录讲解安装node.jsnpm绑定淘宝镜像安装vue脚手架创建vue项目目录解释推荐使用vscode 安装node.js http://nodejs.cn/download/ 根据自己电脑的位数自行下载。可安装到任意盘哈，因为我C盘比较大，我就直接在C盘了。 中间可能有个选项框让你勾选是否安装node.js另外的组件包括chocolate等，记得不勾选哈。 注：vue需要node8以上才能支持 cmd打开命令行，检查是否安装成功，检查node：node
vue3项目搭建
weixin_51349592的博客
03-26 2840
使用vue、vite、axios、vue-router、pinia搭建vue3项目
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
逆境清醒的博客
03-19 15万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
手把手教你搭建vue3项目
weixin_43618130的博客
03-02 5万+
使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目，正好记录一下，按照我的教程让你开启vue3之旅吧！
如何搭建一个vue项目(完整步骤)
热门推荐
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 22万+
这里注意：安装vue-cli对node.js的版本是有要求的。出现版本号则说明安装成功（最新的以官网为准）查看安装的版本（显示版本号说明安装成功）如果你原来有版本或者版本比较低，可以升级。装的两种方式：输入cmd命令。
Vue3项目搭建与常用插件集成教程
01-02
适合人群：对于初学Vue的前端开发人员，尤其适用于有一定JS基础，准备或者正在开展实际Vue项目工作的工程师。 使用场景及目标：无论是独立开发者创建小型应用，还是团队协作大型Web应用程序都可以从这份指南获益，...
精选资源
快速搭建SpringBoot3+Vue3+ElementPlus管理系统
12-09
8. 前端搭建：使用Vue CLI创建Vue项目的基础结构。安装并配置ElementPlus UI库，按照官方文档设计和实现用户界面。 9. 状态管理：若有必要，可以引入Vuex进行状态管理，存储和管理应用的所有状态，并使其在组件间...
基于PyTorch的深度学习图像分类综合工具箱_包含DenseNetResNeXtMobileNetEfficientNetResNet等多种先进卷积神经网络架构并集成W.zip
12-26
基于PyTorch的深度学习图像分类综合工具箱_包含DenseNetResNeXtMobileNetEfficientNetResNet等多种先进卷积神经网络架构并集成W.zip
（34页PPT）农批30模式解决方案.pptx
最新发布
12-26
（34页PPT）农批30模式解决方案.pptx
本项目是一个专注于将先进的AI超分辨率模型高效部署到Android移动设备的开源工程实践项目_通过集成Real-ESRGAN超分辨率算法并探索PytorchMobile与ONNX.zip
12-26
本项目是一个专注于将先进的AI超分辨率模型高效部署到Android移动设备的开源工程实践项目_通过集成Real-ESRGAN超分辨率算法并探索PytorchMobile与ONNX.zip
ACM-ICPC/CCPC/XCPC算法竞赛资料排列组合枚举
12-26
ACM-ICPC/CCPC/XCPC算法竞赛资料排列组合枚举
运算放大器电路的固有噪声分析与测量
12-26
运算放大器电路的固有噪声分析与测量
海南大学高级软件工程课程第五组开发的基于时间序列异常检测与LSTM神经网络模型的校园人流预测与管理系统_该项目专注于利用历史校园人流数据通过LSTM长短期记忆神经网络进行时间序列分.zip
12-26
海南大学高级软件工程课程第五组开发的基于时间序列异常检测与LSTM神经网络模型的校园人流预测与管理系统_该项目专注于利用历史校园人流数据通过LSTM长短期记忆神经网络进行时间序列分.zip
vue3 项目搭建
04-01
<think>好的，我现在需要帮助用户了解如何搭建Vue3项目。用户提到了参考内容中的Vue2和uniapp框架的初始化步骤，但需要的是Vue3的具体方法。首先，我得确保自己熟悉Vue3的官方文档和常用工具，比如Vite和Vue CLI。 首先，用户可能已经知道Vue2的搭建流程，比如使用vue create命令，但Vue3可能有不同的推荐方式。Vue官方现在推荐使用Vite作为构建工具，因为它更快更高效。所以，我应该优先介绍使用Vite来创建Vue3项目，而不是旧版的Vue CLI，尽管Vue CLI仍然支持，但可能不是最佳实践了。 接下来，参考引用[2]里提到的步骤，比如选择项目位置、使用cmd进入终端、输入命令等，这些步骤在Vue3中也是类似的，只是命令不同。比如，用npm create vite@latest代替vue create。需要详细说明每一步的具体操作，包括安装依赖、运行项目等。 另外，用户可能还需要知道初始化后的配置，比如目录结构、必要的插件安装（如Vue Router、Pinia）。参考内容中的uniapp例子提到了按钮和事件处理，但Vue3的项目结构可能有所不同，需要说明src目录下的主要文件，比如main.js、App.vue等。 还要考虑用户可能遇到的问题，比如Node.js版本是否符合要求，是否需要选择不同的配置选项（如TypeScript、JSX支持），以及如何添加路由管理。需要分步骤讲解，确保清晰易懂。 最后，生成的相关问题要围绕Vue3项目搭建的后续步骤，比如如何添加插件、配置路由、优化性能等，这些都是用户可能感兴趣的扩展内容。同时，引用标识需要正确对应到用户提供的参考内容，尽管参考内容中的引用[1]似乎与Vue3无关，但还是要按照要求添加。</think>### Vue3 项目搭建教程 #### 一、环境准备 1. 安装 **Node.js**（版本需 ≥16.0.0），可通过官网下载或使用`nvm`管理多版本[^2]。 2. 检查环境： ```bash node -v # 查看Node版本 npm -v # 查看npm版本 ``` #### 二、创建项目 1. **使用Vite工具**（推荐）： ```bash npm create vite@latest my-vue3-project -- --template vue ``` - 选择`Vue`框架 → 选择`JavaScript`或`TypeScript` 2. **使用Vue CLI**（传统方式）： ```bash npm install -g @vue/cli vue create my-vue3-project ``` - 选择`Vue 3`预设或手动配置特性（如Router、Pinia等） #### 三、初始化配置 1. 安装依赖并启动： ```bash cd my-vue3-project npm install npm run dev ``` 2. **目录结构**： ``` src/ ├─ main.js # 入口文件 ├─ App.vue # 根组件 ├─ assets/ # 静态资源 └─ components/ # 可复用组件 ``` #### 四、添加核心插件 1. 安装路由： ```bash npm install vue-router@4 ``` 2. 状态管理（可选）： ```bash npm install pinia ``` #### 五、代码示例 ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; createApp(App).mount(&#39;#app&#39;) ``` ```vue <!-- App.vue --> <template> <div> <h1>{{ message }}</h1> <button @click="handleClick">点击</button> </div> </template> <script setup> import { ref } from &#39;vue&#39; const message = ref(&#39;Vue3项目已启动!&#39;) const handleClick = () => alert(&#39;交互成功&#39;) </script> ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值