Vue3项目搭建准备（二）

最新推荐文章于 2023-05-13 17:17:50 发布
最新推荐文章于 2023-05-13 17:17:50 发布
阅读量168 收藏
点赞数
分类专栏： Vue3项目搭建 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolchaobing/article/details/119654559
版权

安装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文件夹

coolchaobing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。...3. 搭建vue之前准备工
webpack搭建vue 项目的步骤
11-27
前期准备 webpack vue.js npm nodejs ES6语法 由于本文内容是通过npm来加载vue，所以开始之前需安装nodejs环境，安装完成之后再执行以下步骤： 创建项目 mkdir vue-demo cd vue-demo 使用 npm init 命令 生成...
vue3项目（一）项目前的准备
m0_61368323的博客
05-10 327
路由设计原则：找页面的切换方式，如果是整体切换，则为一级路由，如果是在一级路由的内部进行的内容切换，则为二级路由。在styles文件夹里创建element文件，里面创建index.scss文件，里面引入如下的样式。在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中。3）通知Element采用scss语言，然后导入定制的scss文件覆盖。分类页和Home都是首页中进行切换，所以是首页的子路由。2）在vite.config.js中配置自动导入。
Vue3项目搭建全过程
qq_52013792的博客
07-23 1万+
vue3项目搭建一条龙
11、vue3项目开发前的准备工作
伦伦的博客
08-20 1005
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项目搭建准备（一）
coolchaobing的博客
11-04 94
vue3环境搭建 安装、配置nodejs环境 查看地址 安装或升级vue脚手架 全局安装脚手架 npm install @vue/cli -g 升级脚手架 npm update @vue/cli -g
vue3项目搭建超详解
扶摇直上
05-13 4396
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_43618130的博客
03-02 4万+
使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目，正好记录一下，按照我的教程让你开启vue3之旅吧！
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
逆境清醒的博客
03-19 4万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
如何搭建一个vue项目(完整步骤)
热门推荐
没有在适当的年纪做正确的事，非刻意而为之，知识后知后觉!
04-17 17万+
一、环境准备 1、安装node.js 下载地址：https://nodejs.org/zh-cn/ 界面展示 2、检查node.js版本 查看版本的两种方式 1|node -v 2|node -version 出现版本号则说明安装成功（最新的以官网为准） 3、为了提高我们的效率，可以使用淘宝的镜像源 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源 以后再用到npm的地方直接用cnpm
vue3项目搭建规范
码农日常的博客
10-19 1282
一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = space # 缩进风格（tab | space） indent_size = 2 # 缩进大小 end_of_line = lf #
基于Vue-cli快速搭建项目的完整步骤
12-09
前言 vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。...二、vue-cli快速搭建项目 安装完成后，同时在
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
使用Vue-cli 3.0搭建Vue项目的方法
01-21
1. 环境准备 1.1. 安装Node.js （建议使用LTS版本） 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls ...1.4. 安装vue-cli 3
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
node-v0.10.27-x86.msi
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
课设毕设基于SSM的高校二手交易平台-LW+PPT+源码可运行.zip
05-16
课设毕设基于SSM的高校二手交易平台--LW+PPT+源码可运行
c++,冒险游戏，可供学习
05-16
冒险游戏，可供学习
vue3 搭建完整项目结构
07-11
在Vue 3中，可以通过以下步骤搭建一个完整的项目结构： 1. 通过Vue CLI创建项目：首先，确保你已经安装了最新版本的Vue CLI。然后，在命令行中运行以下命令来创建一个新的Vue项目： ``` vue create project-name ``` 其中，`project-name`是你想要给项目起的名字。在创建过程中，你可以选择手动配置项目，或者选择默认配置。 2. 选择配置及插件：当你选择手动配置项目时，你可以选择使用哪些特性和插件。你可以选择使用Babel、Router、Vuex、CSS预处理器、Linter等等。根据你的需求，选择相应的配置项。 3. 选择目标版本：在Vue CLI 4中，你可以选择使用Vue 2还是Vue 3。选择Vue 3，将会使用Vue 3的语法和特性。 4. 安装依赖：创建项目后，进入项目目录，并运行以下命令来安装项目的依赖： ``` cd project-name npm install ``` 5. 目录结构：Vue CLI会为你创建一个默认的目录结构。这个目录结构已经为你准备好了一些常用的文件和文件夹。你可以根据需要进行调整。 6. 开发环境：运行以下命令来启动开发服务器： ``` npm run serve ``` 这将会在localhost:8080上启动一个开发服务器，并自动监视文件变化并重新编译。 7. 编译与打包：当你准备好部署你的项目时，运行以下命令来编译和打包项目： ``` npm run build ``` 这将会在dist目录下生成一个用于生产环境的打包文件。 以上就是使用Vue CLI搭建Vue 3项目的基本步骤和结构。你可以根据项目的需求，进一步配置和调整项目结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值