vue项目怎么启动，怎么配置快捷serve

最新推荐文章于 2024-04-29 17:47:28 发布
最新推荐文章于 2024-04-29 17:47:28 发布
阅读量4.8k 收藏 3
点赞数 3
分类专栏： Java 文章标签： npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Saika_xy/article/details/106427290
版权

1.打开package.json查看如下在这里插入图片描述
2.打开命令行 执行 npm run serve
在这里插入图片描述
3.执行完毕直接点击就可以访问了
在这里插入图片描述
4.不想通过命令行执行，鼠标右键server 弹出来 run serve
在这里插入图片描述
5.或者更懒的用法直接配置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一劳永逸

啊嘻嘻嘻西八
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一次运行Vue项目 怎么运行别人的Vue项目
qq_45947664的博客
09-18 1万+
这里是因为node_modules文件下装的是项目依赖文件，相当于maven下的插件，如果拿来的文件没有node_modules文件，是无法使用的，用这个npm语句可以下载依赖文件。如果新建终端失败，就在项目右侧，找到最外层文件夹，右键，“在集成终端打开”，在输入 “ npm install ”，最外层文件夹如下：非“login-register-vue”1、在编译器将项目打开，如果已有以下两个文件夹，先删掉，这个是别人编译器运行后生成的，所以不用怕删掉。7、其他问题（安装node.js，vue），
vue项目如何配置在npm run serve项目启动后，自动打开浏览器
马脸男的博客
07-26 1361
请注意，具体打开的浏览器取决于操作系统和默认浏览器的设置。如果希望使用特定的浏览器，可以将脚本进行适当的修改。例如，在Windows操作系统中，可以使用start命令指定浏览器的路径。以上示例中，我们使用了Windows上的start命令和chrome浏览器来打开指定的URL。根据实际情况，你可以使用适合你的操作系统和浏览器的命令进行设置。这样，在运行npm run serve命令时，Vue脚手架将自动打开默认的浏览器。在"serve"命令后添加一个参数–open或-o，用于在启动服务器后自动打开浏览器。
Vue项目 快速上手（如何新建Vue项目，启动Vue项目，Vue的生命周期，Vue的常用指令）_vue项目创建和启动(1)
2401_84418883的博客
04-29 1569
因为我们是Node.js环境，所以就选包管理器中的然后根据自己的需求选择预设这里笔者选择的是手动，选择手动后就可以自定义需要哪些功能不需要哪些功能点击下一步，配置Vue的版本和语法检测然后我们耐心等待，项目就创建好了我们此时去磁盘上查看的话就能看见我们的项目，我们就可以使用VScode打开项目了。
2022.12.27号笔记 解决 npm run serve 项目起不来问题 解决 npm run serve 项目起不来问题
Ruiqi8的博客
12-27 824
解决 项目 npm run serve 后自动打开浏览器问题。在 项目目录上输入 cmd 然后 写code .按快捷键 ctrl+` 即可打开终端子窗口，如下图所示。3.前端 项目如何在文件夹 中直接打开vscode。2 svn拉下的代码 是压缩好的如何处理。
vue 启动服务的三种方法
qq_15256443的博客
04-30 4万+
1.vue serve启动 注意：vue serve使用了和vue create创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是main.js、index.js、App.vue或app.vue中的一个。你也可以显式地指定入口文件： 2.npm run serve 或者 yarn ser...
关于Vue执行命令dev和serve
学习使我快乐_玉祥
08-16 2626
dev是vue-cli2版本的命令，它有它自己的config文件夹，build文件夹 serve是vue-cli3版本的命令，它不需要config，build文件夹，而是以vue.config.js配置文件的形式代替。 因此，如果你创建的是vue-cli3版本的Vue项目，想用dev命令，会涉及到很多的插件不兼容，以及这些配置文件缺失的情况，是个旋涡坑........，既然创建了3版本就用serve即可......。 ...
windows下vue项目启动步骤(转载)
别告诉我有Bug
08-14 1793
vue项目启动步骤 https://blog.csdn.net/qq_27680317/article/details/71123051
npm run serve 和 npm start ，在命令行中启动vue项目指令的区别
weixin_44867717的博客
03-17 9384
npm run serve 和 npm start ，在命令行中启动项目指令的区别 基于vue-cli搭建的文件，为了测试方便，不使用 npm run serve启动项目时，可进行如下操作启动项目 在package.json文件中： { "name": "01-demo", "version": "0.1.0", "private": true, "scripts": { + ...
vue项目启动时，是npm run serve，还是 npm run dev ？
pangzi_mm的博客
03-21 2460
npm run serve
vue3.0搭建项目文档
10-31
总的来说，Vue CLI 3使得Vue3.0项目搭建变得简单快捷。通过这个工具，开发者可以快速地开始开发，专注于编写业务逻辑，而不是配置环境。熟悉这些步骤和Vue3.0的新特性，将有助于你更好地利用Vue.js构建高性能的应用...
详解vue-loader在项目中是如何配置的
12-03
Vue CLI 自动配置了所有必需的加载器和插件，包括 Vue Loader，因此对于初学者来说，使用 Vue CLI 创建项目是一种更简单、快捷的方式。但了解手动配置的过程可以帮助你更好地理解 Webpack 和 Vue Loader 的工作原理...
vue-cli3搭建项目的详细步骤
10-17
总的来说，Vue CLI 3 提供了一种简单快捷的方式来搭建 Vue 项目，减少了手动配置的工作量。无论是通过命令行还是 GUI 界面，它都为开发者提供了灵活的选项，使得项目初始化过程变得更加高效。学习和掌握 Vue CLI 3 ...
Vue开发项目的开发流程讲解及部署.docx
最新发布
05-10
在Vue项目中，页面布局通常涉及到路由配置。使用Vue Router可以帮助实现页面间的导航和路由管理。在`src`目录下创建一个名为`views`的文件夹，用于存放项目的各个页面。每个页面可能由多个组件构成，通过路由配置...
vue-cli3.0配置demo更新
07-23
`package.json` 文件包含了项目依赖和脚本命令，如 `npm run serve`（启动开发服务器）和 `npm run build`（构建生产包）。`package-lock.json` 是 `npm` 自动生成的，记录了所有依赖的确切版本，确保团队成员间的...
VS Code配置F5一键运行Vue应用（npm run serve）
大道至简
01-10 9579
VsCode能否一键运行程序？比如按下F5，直接运行npm run serve； 答案是可以！！！ 请往下看。
【vue】devserver及其配置
热门推荐
qq_42425551的博客
03-08 4万+
一、devserver背景介绍 每次改代码都需要重新部署, 或者只改变修改代码行的效果 所以出现了devserver本地服务 为了完成自动编译，webpack提供了几种可选的模式 方式一：webpack watch mode 实现方法一： 在导出的配置中，添加watch:true 实现方法二： 在启动webpack的命令中，添加–watch的标识 方式二：webpack-dev-server(常用) 二、webpack-dev-server 上面的方式可以监听到文件的变化，但是事实上它本身没有自动刷新浏
vue执行配置选项npm run serve的本质
pulledup的博客
09-14 1万+
npm run serve、npm run build等“调试运行脚本”：仅仅是Vue默认在内部做了1个“命令行”封装而已！以包配置文件（package.json）的形式与用户交互。打开“工程”下的node包依赖路径下的“可执行脚本”目录：node_modules\bin。
VuePress搭建博客教程(二)、vuepress安装与启动
JingLisen的博客
08-20 2593
小景哥哥博客 VuePress搭建博客教程(二)、vuepress安装与启动 一、创建并进入一个新目录 我们把项目保存在桌面的2021/projects/vuepress-hep目录下，当然可以按照个人喜好随便选取位置。 cd Desktop cd 2021 cd projects mkdir vuepress-hep cd vuepress-hep 二、使用npm包管理器进行初始化 npm init 三、安装vuepress npm install -D vuepress 四、创建第一个文档 在vu
vue项目启动步骤
qq_45591403的博客
07-31 8683
(1). 确保nodejs已经安装 第一步 01-基础-vue-cli 工具-介绍 内置开发时本地服务器，预览代码 统一项目的目录结构 内置开发过程中用到的各种工具 (1). babel编译 (2). eslint代码风格约束 (3). less预处理器 内置开发时本地服务器，预览代码 自动刷新，方便预览 热更新 其它高级功能 02-基础-vue-cli-安装 安装 npm install -g @vue/cli # OR yarn global add @vue/cli 命令说明
vscode启动vue项目配置
10-27
要在VSCode中启动Vue项目，需要进行以下配置： 1. 安装Node.js：在官网下载并安装最新版本的Node.js。 2. 安装Vue CLI：打开终端或命令提示符并运行以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 创建Vue项目：在终端中进入项目存放的文件夹，并运行以下命令创建一个新的Vue项目： ``` vue create my-project ``` 按照提示选择适合的配置，等待安装完成。 4. 打开项目：在VSCode中打开刚刚创建的Vue项目文件夹。 5. 安装依赖：在终端中进入项目文件夹，并运行以下命令安装项目所需的依赖： ``` npm install ``` 6. 启动项目：运行以下命令启动Vue项目： ``` npm run serve ``` 7. 查看项目：在浏览器中访问http://localhost:8080/，即可查看正在运行的Vue项目。 此外，VSCode还提供了许多有用的扩展和插件，可增强对Vue项目的开发体验。可以通过在扩展商店中搜索并安装Vue相关的插件，如Vetur、Vue Peek等。这些插件提供了丰富的功能，如代码补全、语法高亮、调试功能等，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值