开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

vue.js cli命令"npm run serve“工作原理

Vue.js是一种用于构建用户界面的开源JavaScript框架，它具有简单易用、灵活高效、可扩展性强等特点。Vue.js CLI（命令行界面）是Vue.js官方提供的一个工具，用于快速搭建和管理Vue.js项目。在Vue.js CLI中，"npm run serve"是一个常用的命令，用于启动开发服务器。

工作原理如下：

首先，"npm run serve"命令会通过npm运行package.json文件中的scripts字段中的"serve"命令。
在Vue.js CLI中，"serve"命令实际上是一个预定义的命令，它会执行vue-cli-service的serve命令。
vue-cli-service是Vue.js CLI提供的一个命令行工具，用于运行各种开发任务。当执行"vue-cli-service serve"命令时，它会通过webpack打包工具编译和打包项目，并启动一个开发服务器。
开发服务器会监听指定的端口（默认为8080），并在该端口上启动一个本地开发环境，用于开发和调试Vue.js应用程序。
当开发服务器启动后，它会自动监测代码的变化，并在代码发生变化时自动重新编译和刷新页面，以便开发人员可以实时预览修改结果。

"npm run serve"命令的工作原理简单易懂，通过启动开发服务器提供了一个方便的开发环境，可以快速进行Vue.js项目的开发和调试工作。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供弹性计算能力，适合部署和运行Vue.js应用程序。了解更多：https://cloud.tencent.com/product/cvm
云开发（CloudBase）：提供一站式云端开发平台，支持前后端一体化开发，适合构建Vue.js全栈应用。了解更多：https://cloud.tencent.com/product/tcb

相关搜索:npm run watch停止工作-带有Vue.js的Laravel Vue CLI 3- npm run serve vs serve -s dist Vue.js -当应用程序通过npm run serve运行时使用终端为什么npm run serve在带有vue-cli的WSL上出现错误？在brandnew Vue-CLI生成的项目上运行npm run serve时出错如何让Visual Studio显示真实的Vue.js错误？“命令npm run build退出，返回代码%1。”当使用` in serve`或` `npm Run browser`命令时，在PC浏览器中运行InAppBrowser (或模拟它)云硬盘网站云端数据库云端虚拟机

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue基础知识和实例展示

HTML 工作原理：HTML 是部署在服务器上的文本文件，根据 HTTP 协议浏览器发出请求给服务器，服务器做出响应给浏览器返回一个 HTML，浏览器解释执行 HTML，从而显示内容。...2 新项目启动安装依赖包： npm install 若有部分包安装失败： npm audit fix --force 启动： npm run serve 打包： npm run build 3...3.2 安装 Vue.js Node.js 安装成功后，可以安装 Vue.js 了。国内直接使用 npm 的官方镜像是非常慢的，通常使用淘宝 NPM 镜像。...4 单页实例 4.1 安装环境首先全局安装 vue-cli： cnpm install --global vue-cli 使用 cd 命令切换到一个新目录，用于存放 web 项目（嫌麻烦可以跳过这一步...To get started: cd my-project npm install npm run dev Documentation can be found at https:/

8803 2

Vue.js——60分钟browserify项目模板快速入门

Vue.js官方提供了两种类型的模板项目：基于vue cli和browserify的项目模板基于vue cli和webpack的项目模板 vue cli是Vue.js官方提供的命令行创建Vue.js...执行以下命令安装vue cli npm install -g vue-cli 安装完vue cli后，我们就可以在git bash窗口中使用命令创建Vue.js的项目了。...": "http-server -c 1 -a localhost", "dev": "npm-run-all --parallel watchify serve" } npm run dev 命令执行的是...dev节点对应的命令 npm-run-all --parallel watchify serve ，这行命令是依赖于watchify的，也就是下面这行命令： watchify -vd -p browserify-hmr...在git bash窗口执行npm run dev命令时，也能够观察到编译过程。 ? watchify 是什么东东呢？

1.3K2 0

Vue开发环境搭建

/ 查看当前npm版本 npm --version 6.4.1 升级npm sudo npm install -g npm 安装vue npm install vue 安装Vue CLI脚手架 $ npm..., updated 1 package and moved 97 packages in 132.885s 安装webpack npm install webpack -g 运行 npm run dev...Get started with the following commands: $ cd hello-world $ npm run serve cd hello-world npm run serve...CLI3热部署项目使用的命令是 npm run serve 使用原先CLI2版本创建项目 vue init webpack my-project $ vue init webpack my-project...Should we run `npm install` for you after the project has been created?

1K5 1

超简单入门Vuex小示例

基于vue-cli脚手架生成一个vue项目，vue-cli是Vue.js 开发的标准工具。...然后按上图执行项目，进入vuexexample项目根目录并使用npm run serve命令启动vuexexample项目： cd vuexexample npm run serve ?...对应的命令行中会运行创建项目的命令，创建项目模板。进入项目目录，使用npm run serve先试着跑一下。一般不会出现问题，试跑成功后，就可以写我们的vuex程序了。...$mount('#app') 运行vuexexample项目 npm run serve ? 最终项目的运行初始效果图如下图所示： ?...https://github.com/vuejs/vue-cli Standard Tooling for Vue.js Development https://cli.vuejs.org/ Vue.js

1.1K3 0

Vue：npm run serve 到底做了什么？

前言在 vue-cli2或者 vue-cli3 中，当我们创建好一个项目，我们要通过 npm run dev（vue-cli2的命令，vue-cli3之后用npm run serve，原理都一样，只不过是换了一下名字而已...这背后到底是做了什么我们在命令行中输入命令： npm run serve 看一下运行成功之后的提示信息：有没有小伙伴想过这样的问题：为什么是运行npm run serve命令呢，这些命令在哪里呢...": "vue-cli-service build", "lint": "vue-cli-service lint" } } 聪明的小朋友可能已经明白了，会不会我们 npm run serve...其实是对的，当我们输入 npm run 之后，就是相当于运行 vue-cli-service serve 这行指令。这个名称可以改，我们改成 dev 之后，就是 npm run dev。...总结：当我们在命令行中输入 npm run xxxx的时候，其实就是执行 package.json文件里的 scripts里的某个命令 npm run serve命令之后，就是开启了一个服务来运行我们的项目

2.4K2 0

一篇把vue准备工作说的明明白白的（奶妈级教程）

什么是Vue.js Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。...Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。...) 步骤： 1.全局安装@vue/cli: ·将cmd用管理员权限打开 ·配置国内npm淘宝镜像：npm config set registry https://registry.npm.taobao.org...·输入 npm install -g @vue/cli ·切换到你要创建项目的目录，命令创建项目（如:想要再桌面创建一个vue项目文件）： -cd Desktop -Desktop > vue create...我们用vscode打开它（当然别的编译软件也可以，我比较习惯使用vscode）用vscode的终端输入：npm run serve 会出现两个网址第一个：供自己惊醒浏览第二个：供局域网内所有人浏览

3803 0

Electron: 如何以 Vue.js, Vuetify 开始应用

npm install -g yarn 查看 Yarn 版本： $ yarn -v 1.22.4 Vue CLI Vue CLI 是 Vue.js 开发的标准工具。...-V @vue/cli 4.4.6 创建 Vue.js 应用 vue create my-app 跟随引导进行工程配置，如下： Vue CLI v4.4.6 ?...命令定义在了 package.json ： { ......"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint":...": "electron-builder install-app-deps" }, ... } yarn 执行即可，如下: $ yarn lint yarn run v1.22.4 $ vue-cli-service

1.5K2 0

全栈的自我修养: 002使用@vuecli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)

一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。...安装@vue/cli 在上篇中，我们使用了 npm install -g vue-cli 完成 vue-cli 的安装作为新版本，Vue CLI 的包名称由 vue-cli 改成了 @vue/cli....我们需要执行以下命令安装 epimetheus$ npm install -g @vue/cli 安装速度还是比较慢的，大家可以喝杯水安装完成后可以 vue --version 看下版本号 epimetheus...epimetheus/epimetheus-frontend$ (master) yarn serve yarn run v1.15.2 $ vue-cli-service serve INFO Starting...在这里插入图片描述这样准备工作基本就完成了项目结构相信开发上篇文档，已经可以使用 code 命令，如果还是不能使用，可以根据下面的提示进行安装，这里我们直接使用 code .

1.1K2 0

Electron + vue搭建项目

因为之前的技术栈大部分用的Vue.js，所以想采用vue + electron的方式快速迁移之前的项目。方法查阅了很多资料，我总结了以下几种方式进行“融合”。...install安装包（electron安装缓慢，后续更新教程） 3、使用npm run start 就可以启动项目，测试是否安装成功图片 4、使用vue-cli创建一个vue项目，然后打包到dist...render.js 4、修改package.json 的入口 main: "render.js" 5、添加启动命令 "electron:serve": "vue-cli-service electron...:serve" 6、在render.js 中加载路径改为 mainWindow.loadURL("http://localhost:8080") 三、vue-electron 1、首先需要安装npm...，项目自动生成为electron项目 3、使用npm run electron:serve 就可以启动项目

1.7K1 0

Vue入门 - 环境搭建&项目初始化（HelloWorld）

Vue 3.x安装 npm install -g @vue/cli npm i -g @vue/cli-init 三、webpack安装 npm install -g webpack 四、Hello...Should we run `npm install` for you after the project has been created?...cd vuedemo npm install 项目运行 #vue 2.x npm run dev #vue 3.x npm run serve 访问：http://localhost:8080...五、可能碰到的问题 1、node命令不存在解决办法：配置环境变量PATH，增加：C:\Program Files\nodejs 2、安装vue-cli报错 permissions of the file...解决办法：使用sudo命令

7241 0

使用Vue脚手架创建Vue项目+分析生成的文件

开局先开挂--创建Vue脚手架 ====================== cmd命令 ===================== 为了防止下载过慢先配置 npm 淘宝镜像 npm...config set registry https://registry.npm.taobao.org 全局安装@vue/cli。...run serve 或先从进入该文件，再打开cmd --- npm run serve 最后生成的文件分析文件【注意：不要随便乱改文件名】 Ctrl + ~ （esc下面那个键...）：可以打开 vscode 终端，然后输出 npm run serve 即可打开浏览器页面 public文件 favicon.ico是页面图标 , index.html解析如下图...的这个js只是删减版vue.runtime.xxx.js 1. vue.js与vue.runtime.xxx.js的区别： 1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。

1771 0

Vue-CLI快速搭建Vue项目

目录 Vue-CLI简介可视化界面搭建Vue项目完全命令行搭建Vue项目 Vue-CLI简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架...一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。...详细内容请查看vue-cli官网。使用之前要确保已经安装npm、node.js以及vue，安装完成后可以通过命令行查看。...可视化界面搭建Vue项目在终端中输入 ==vue ui== 之后会自动打开浏览器 > vue ui 选择项目需要创建的目录，点击在此创建新目录填写项目文件夹名，选择包管理器npm，点击下一步。...此时打开新终端，输入npm run serve。按住Ctrl并点击网址，即可在浏览器中查看vue项目完全命令行搭建Vue项目

5444 1

天天命令中输入 npm run xxx，倒底 npm run 做了什么，为什么就能开启一个服务？

但是今天我们重点介绍的不是 npm 是什么，而且是基于我们平时在开发的过程中都会在命令中行中输入: //开发阶段 npm run dev 或者 npm run serve // 打包阶段 npm run...03 — 原理分析我们在命令行中输入命令： npm run serve 看一下运行成功之后的提示信息：有没有小伙伴想过这样的问题：为什么是运行npm run serve命令呢，这些命令在哪里呢，...": "vue-cli-service build", "lint": "vue-cli-service lint" } } 聪明的小朋友可能已经明白了，会不会我们 npm run serve...其实是对的，当我们输入 npm run 之后，就是相当于运行 vue-cli-service serve 这行指令。这个名称可以改，我们改成 dev 之后，就是 npm run dev。...npm run serve 就是在运行这个vue-cli-service.js脚本文件。看一下里面的一些代码： const Service = require('..

1.4K2 0

基于 vue-cli + webpack 开发实践：《体育视频播放页》

《体育视频播放页》基于vue-cli+webpack开发，此次开发总结，将会总结开发过程中涉及到的知识点以及开发技巧，希望能帮助到想要在工作中使用Vue.js开发的小伙伴。...NPM v3.0 及以上 1.2 快速安装 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install...$ npm run dev 1.3 vue-cli自带命令（测试部分可配置） # install dependencies npm install # serve with hot reload...at localhost:8080 npm run dev # build for production with minification npm run build # run unit tests...npm run unit # run e2e tests npm run e2e # run all tests npm test 1.4 开发环境 $ npm run dev 1.4 代码构建

2.5K5 1

如何在 Windows 上安装 Angular：Angular CLI、Node.js 和构建工具指南

但 Angular 不依赖 Node.js，除了它的 CLI 工具和从 npm 安装包。 NPM 代表Node包管理器。它是托管 Node 包的注册表。...您可以通过在命令提示符中运行以下命令来确保系统上安装了 Node，该命令应显示已安装的 Node 版本： $ node -v 接下来，运行以下命令来安装 Angular CLI： $ npm install...generate (g): 根据原理图生成和/或修改文件。 help: 列出可用命令及其简短描述。...new (n): 创建一个新的工作区和一个初始的 Angular 应用程序。 run: 运行项目中定义的自定义目标。 serve (s): 构建并服务您的应用程序，根据文件更改进行重建。...因此，您不需要安装本地服务器来为您的项目提供服务 —您可以简单地从终端使用 ng serve 命令在本地为您的项目提供服务。

2980 0

Vue简介,原理,环境安装及简单hello案例

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）前端的主要工作？...Should we run `npm install` for you after the project has been created?...选择No) 进入myVue,使用npm install 安装package.json中的依赖 cd myVue npm install 运行项目 npm run dev...https://registry.npm.taobao.org/ npm install -g @vue/cli yarn global add @vue/cli 创建vue项目 vue create...vue运行原理 vue语法-->原生语法 ? 本地文件引入小案例传统开发模式 ? Vue ?

1.8K4 0

懂个锤子Vue 项目工程化

： Vue CLI 是Vue官方提供的一个全局命令工具基于node 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】Vuex： Vuex 是 Vue.js 的官方状态管理库...它允许根据 URL 渲染不同的视图，而无需刷新页面；Vue CLI 使用：介绍 | Vue CLI 官方文档 Vue CLI是一个强大的命令行工具：用于快速搭建 Vue.js 项目，以下是使用 Vue...打开命令行工具，输入以下命令：# 使用 npm:npm install -g @vue/cli# 使用 Yarn:yarn global add @vue/cli查看vue/cli版本： vue --...；#首先切换至项目目录:cd vue_demo1#启动命令: yarn serve npm run serve#命令不固定,部分企业会修改 package.json)项目目录介绍和运行流程：node_modules...运行流程：使用 vue serve 或 npm run serve 启动开发服务器验证Vue模板组件：尝试修改 index.html、App.vue——>HelloWorld.vue 模板，验证效果

741 0

Vue新手必学：Vue的使用和Vue脚手架详解

# 全局安装Vue CLI npm install -g @vue/cli 1.2 创建Vue项目安装完成Vue CLI后，我们可以使用以下命令创建一个新的Vue项目： vue create my-vue-app...1.5 运行Vue项目现在我们已经完成了一个简单的Vue项目，可以通过以下命令运行： npm run serve 然后打开浏览器访问http://localhost:8080/，你将看到你的第一个Vue...第二部分：Vue脚手架的使用 2.1 Vue脚手架是什么 Vue脚手架（Vue CLI）是一个基于Vue.js进行快速开发的完整系统。...2.2 创建Vue项目使用Vue CLI创建项目的过程我们已经在第一部分介绍过了，这里再次提一下，可以使用以下命令： vue create my-vue-project 2.3 项目结构 Vue脚手架创建的项目结构如下...2.4 运行项目使用以下命令运行项目： npm run serve 然后访问http://localhost:8080/，你将看到Vue CLI创建的项目。

3861 0

Vue 脚手架CLI 初始化项目

1 介绍 CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。...Vue CLI是一个官方发布vue.js项目脚手架使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。...使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 2 Vue CLI使用前提 Webpack Vue.js官方脚手架工具就使用了webpack模板对所有的资源会压缩等优化操作...它在开发的过程中提供了一套完整的功能，能够使得我们开发过程变得高效 Webpack全局安装 npm install webpack -g 3 Vue CLI安装 https://cli.vuejs.org...Vue CLI2初始化项目 vue init webpack my-project 4 常用命令打包项目 npm run build 运行项目 npm run serve 6 其他常用文件 .editorconfig

1490 0

基于 vite 创建 Vue3 项目，新增的目录文件分析，启动项目

1、基于 vue-cli 创建 ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的@vue/cli npm install...-g @vue/cli ## 执行创建命令 vue create vue_test ## 随后选择3.x ## Choose a version of Vue.js that you want...to start the project with (Use arrow keys) ## > 3.x ## 2.x ## 启动 cd vue_test npm run serve 2、基于...## 1.创建命令 npm create vue@latest ## 2.具体配置 ## 配置项目名称 √ Project name: vue3_test ## 是否添加TypeScript支持 √...i 3、tsconfig.app.json、tsconfig.json、tsconfig.node.json ts的配置文件，留着，别动它(σ｀д′)σ 4、启动项目 npm run dev

2211 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭