Laqudee.Z - F2E

使用命令

  • 一个Vue CLI项目中，@vue/cli-service安装了一个名为vue-cli-srvice的命令。可以在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 or yarn调用这些script
npm run serve

yarn serve

# 或者使用最新版npm已经自带的npx命令
npx vue-cli-service serve

提示

可以通过vue ui命令使用GUI运行更多的特性脚本

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)

  • 除了添加options外，也可以使用vue.config.js中的devServer字段配置开发服务器

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

vue-cli-service build

# 用法： vue-cli-service build [options] [entry]
# 选项：
    --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/html/css的压缩，和为了更好的缓存而做的自动的vendor chunk splitting. 它的chunk manifest会内联在HTML里

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]

缓存和并行处理

  • cache-loader会默认为Vue/Babel/TypeScript编译开启。文件会缓存在```node_modules/.cache中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。

  • thread-loader会在多核CPU的机器上为Babel/TypeScript转译开启。

Git Hook

  • 在安装之后，@vue/cli-service也会安装yorkie
  {
    "gitHooks": {
      "pre-commit": "lint-staged"
    },
    "lint-staged": {
      "*.{js,vue}: [
        "vue-cli-service lint",
        "gti add"
      ]
    }
  }

配置时无需Eject

  • 通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的，所以绝大多数情况下，你只需要在交互式命令提示中选取需要的功能即可。