vue-cli脚手架使用

  • 可升级,可能是指在vue create项目时,会从网上下载最新的默认配置方案及依赖
  • 可以通过项目内的配置文件进行配置,分别为
    • 创建项目时的配置 .vuerc文件,在我的文档下
    • 项目打包时的配置,在手动创建的vue.config.js文件中配置
    • 插件的配置文件,位于各个插件对应的配置文件或集合在package.json中

————————————————————————————————————————————————————

@vue/cli

  • @vue/cli 提供了终端里的 vue 命令。(这是创建项目的工具库)

vue create

  • 快速创建一个新项目的脚手架,例如vue create hello-world

参数

  • -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项?
# 从 GitHub repo 使用 preset
vue create --preset username/repo my-project

#GitLab 和 BitBucket 也是支持的。如果要从私有 repo 获取,请确保使用 --clone 选项:
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

# 本地拥有preset文件,单独引用时(./my-preset 应当是一个包含 preset.json 的文件夹)
vue create --preset ./my-preset my-project

# 或者,直接使用当前工作目录下的 json 文件:
vue create --preset my-preset.json my-project
  • -d, --default 忽略提示符并使用默认预设选项
  • -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项?
  • -m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端,应该是指安装依赖使用的依赖管理器,例如npm 、yarn、cnpm等
  • -r, --registry <url> 在安装依赖时使用指定的 npm registry,应该是指安装依赖时使用的路径,比如npm的淘宝镜像路径。这两项较少使用,在vue create完成后,会自动检查依赖所在网络情况,提醒更换淘宝路径。
  • -g, --git [message] 强制 / 跳过 git 初始化,并可选的指定初始化提交信息?
  • -n, --no-git 跳过 git 初始化?
  • -f, --force 覆写目标目录可能存在的配置
  • -c, --clone 使用 git clone 获取远程预设选项?
  • -x, --proxy 使用指定的代理创建项目?
  • -b, --bare 创建项目时省略默认组件中的新手指导信息,应该是指创建好的项目不包括示例文件
  • -h, --help 输出使用帮助信息vue create --help

vue serve

  • 构建新想法的原型,支持所有的配置文件及依赖(为同目录下的入口文件建立一个服务器,需要@vue/cli-service-global模块支持)
  • 入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。把入口文件放在package.json文件同级目录下执行命令便可
  • 可以显式地指定入口文件vue serve MyComponent.vue

参数

  • -o, --open 打开浏览器
  • -c, --copy 将本地 URL 复制到剪切板
  • -h, --help 输出用法信息

vue ui

  • 建立一个web服务,提供一套图形化界面管理你的所有项目vue ui

vue inspect

  • 审查解析好的 webpack 配置,是vue-cli-service inspect的一个别名,需要@vue/cli-service模块支持(参考vue-cli-service inspect)

vue build

  • 可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署vue build MyComponent.vue

参数

  • -t, --target <target> 构建目标 (app | lib | wc | wc-async, 默认值:app)(参考 vue-cli-service build 的构建目标)
  • -n, --name <name> 库的名字或 Web Components 组件的名字 (默认值:入口文件名)
  • -d, --dest <dir> 输出目录 (默认值:dist)
  • -h, --help 输出用法信息

vue add

  • 有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件,可以使用 vue add 命令:vue add @vue/cli-plugin-eslint
  • 官方插件可以使用缩写方法引用,例如vue add @vue/cli-plugin-eslint可以写为vue add @vue/eslint
  • 推荐在运行 vue add 之前将项目的最新状态提交,因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。
  • 可以向被安装的插件传递生成器选项 ,这样做会跳过命令提示。例如:vue add @vue/eslint --config airbnb --lintOn save
  • vue-router 和 vuex 的情况比较特殊——它们并没有自己的插件,但是你仍然可以 vue add 添加它们
vue add router
vue add vuex

vue invoke

  • 你可以使用 vue invoke 命令跳过安装过程,只调用它的生成器。这个命令会接受和 vue add 相同的参数。?

——————————————————————————————————————————————

@vue/cli-service

猜你喜欢

转载自www.cnblogs.com/qq3279338858/p/10318529.html