关于Vue CLI3中启动cli服务参数说明

目录
  • vue常用命令

使用命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

{
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}
}

你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve

如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：

npx vue-cli-service serve

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

选项：

  • --open：在服务器启动时打开浏览器
  • --copy：在服务器启动时将 URL 复制到剪切版
  • --mode：指定环境模式 (默认值：development)
  • --host：指定 host (默认值：0.0.0.0)
  • --port：指定 port (默认值：8080)
  • --https：使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用 vue.config.js 里的 –devServer 字段配置开发服务器。

命令行参数 [entry] 将被指定为唯一入口，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]

选项：

  • --mode：指定环境模式 (默认值：production)
  • --dest：指定输出目录 (默认值：dist)
  • --modern：面向现代浏览器带自动回退地构建应用
  • --target ：app | lib | wc | wc-async (默认值：app)
  • --name：库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  • --no-clean：在构建项目之前不清除目标目录
  • --report：生成 report.html 以帮助分析包内容
  • --report-json：生成 report.json 以帮助分析包内容
  • --watch：监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

  • --modern：使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
  • --target：允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
  • --report和--report-json会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]

选项：

  • --mode：指定环境模式 (默认值：development)

你可以使用 vue-cli-service inspect来审查一个 Vue CLI 项目的 webpack config。

查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：

npx vue-cli-service help

你也可以这样学习每个命令可用的选项：

npx vue-cli-service help [command]

vue常用命令

安装vue-cli：npm install -g @vue/cli

新建项目：vue init webpack projectName

运行项目：npm run dev

编译项目: npm run build

引入框架（echarts 框架名称）：cnpm install echarts -S

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • vue-cli3 配置开发与测试环境详解

    vue-cli3 配置开发与测试环境详解

    需求 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别. 根据以上项目的基本情况,分析出需求如下: 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用. 实现输入一行命令,执行两条指令,分别打包线上生产环境和线上测试环境的代码. 实现打包之后,自动将打包好的文件夹分别按照项目名+

  • 详解vue-cli3使用

    详解vue-cli3使用

    近日,Vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下. 文档地址vue-cli 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 使用 <!-- 安装 --> npm install -g @vue/cli <!-- 创建项目 --> npm create new-cli 然后就是配置,可默认(babel,eslint),自定义 自定义有 babel ts pwa vue-router vuex css预处理 以及Lint

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • 关于Vue CLI3中启动cli服务参数说明

    目录 vue常用命令 使用命令 在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令.你可以在 npm scripts 中以 vue-cli-service.或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令. 这是你使用默认 preset 的项目的 package.json: { "scripts": {   "serve": "vue-

  • Vue CLI3中使用compass normalize的方法

    normalize:统一了基本的样式,如margin: 0;(类似compass中的reset模块) compass:对sass的封装,扩展 1.安装 npm i normalize.css compass-mixins --save-dev 1.1 normalize.cssx引用 在main.js中 import 'normalize.css' 这样就完成了引用,F12,查看 body { margin: 0; // 如果是0则说明normalize已经起作用 } 2.1 compass引用

  • Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • 在 本地计算机 无法启动mysql服务 错误1067：进程意外中止

    无论安装何版本的mysql,在管理工具的服务中启动mysql服务时都会在中途报错  内容为:在 本地计算机 无法启动mysql服务 错误1067:进程意外中止 经过多方求教,得解决方法如下 查找系统(后来验证应该为windows目录)目录下的my.ini文件,编辑内容(如果没有该文件,则新建一个),至少包含basedir,datadir这两个基本的配置.  [mysqld]  # set basedir to installation path, e.g., c:/mysql  # 设置为MYS

  • Vue.js中使用Vuex实现组件数据共享案例

    当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方

  • 详解vue express启动数据服务

    这两天学习了一下vue和express结合,本文记录一下vue express启动数据服务 记录一下配置 build->dev.sever.js配置 var apiServer = express() var bodyParser = require('body-parser') apiServer.use(bodyParser.urlencoded({ extended: true })) apiServer.use(bodyParser.json()) var apiRouter = exp

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • Intellij IDEA中启动多个微服务(开启Run Dashboard管理)

    刚接触了一个微服务架构的项目,了解到了启动方式,记录一下 1.找到workspace.xml 2.打开workspace.xml,找到其中的配置项 RunDashboard 加入如下内容: <option name="configurationTypes"> <set> <option value="SpringBootApplicationConfigurationType" /> </set> </optio

  • vue中利用mqtt服务端实现即时通讯的步骤记录

    MQTT协议 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可以把所有联网物品和外部连接起来,被用来当做传感器和制动器(比如通过Twitter让房屋联网)的通信协议. MQTT是轻量级基于代理的发布/订阅的消息传输协议,它可以通过很少的代码和带宽和远程设备连接.例如通过卫星和代理连接,通过拨号和医疗保健提供者连接,以及在一些自动化或小型设备上,而且由于小巧

  • MySQL在Windows中net start mysql 启动MySQL服务报错 发生系统错误解决方案

    MySQL在Windows中net start mysql 启动MySQL服务报错 发生系统错误解决方案

    目录 1-错误详情 2-单次解决方法 2.1-目录 C:\Windows\System32 -> 找到 cmd.exe 2.2-右击属性 -> 以管理员身份运行 2.3-运行成功 3-永久解决方法 3.1-在 2.2 中:右击属性 -> 发送到(N) -> 桌面快捷方式 3.2-右击属性 -> 快捷方式 -> 高级 -> 以管理员身份运行 -> 确定 3.3-运行成功: 4-备注 4.1-Windows 服务名不区分大小写 4.2-两条语句含义 1-错误详情

随机推荐