基础

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

更多详情可查看： 官方文档

创建一个项目

1、安装

npm install -g @vue/cli

# 如果已经安装过 vue-cli 2.0，需要先卸载掉
# npm uninstall -g vue-cli
# 包名不一样，如果无法使用命令行卸载 可以直接删除全局安装的文件 /usr/local/bin 和 /usr/local/lib/node_modules

其中：

  • CLI： @vue/cli，一个全局安装的npm包，提供vue命令， 例如：vue create 、 vue serve、 vue ui。

  • CLI服务： @vue/cli-service，一个开发环境依赖，局部安装在每个@vue/cli创建的项目中，构建于 webpack 和 webpack-server 之上，提供vue-cli-serve相关命令。比如vue-cli-serve build 、vue-cli-serve serve、vue-cli-serve lint等。

  • CLI插件：向Vue项目提供可选功能的npm包，比如内建插件@vue-cli-plugin-、社区插件vue-cli-plugin-。在执行vue-cli-serve命令时，自动解析并加载 package.json中列出的所有CLI插件。

2、创建一个项目

vue create [options] <app-name>

会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

被保存的 preset 将会存在用户的 home 目录下一个名为 ~/.vuerc的 JSON 文件里。如果你想要修改被保存的 preset 选项，可以编辑这个文件。

在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

插件

插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令

vue add eslint
# 对应的插件完整包名为 vue-cli-plugin-eslint

如果一个插件已经被安装，你可以使用 vue invoke 命令跳过安装过程，只调用它的生成器。这个命令会接受和 vue add 相同的参数。

你也可以基于一个指定的 scope 使用第三方插件。例如如果一个插件名为 @foo/vue-cli-plugin-bar，你可以这样添加它：

vue add @foo/bar

如果出于一些原因你的插件列在了该项目之外的其它 package.json 文件里，你可以在自己项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。

例如，如果你有一个 .config/package.json 文件：

// 项目根目录的 ./package.json
{
  "vuePlugins": {
    "resolveFrom": ".config" // 指向 ./config/package.json
  }
}

项目本地的插件

如果你需要在项目里直接访问插件 API 而不需要创建一个完整的插件，你可以在 package.json 文件中使用 vuePlugins.service 选项：

// package.json
{
  "vuePlugins": {
    "service": ["./my-commands.js"],
    "ui": ["my-ui.js"]
  }
}

1、本地插件的写法

// my-commands.js
module.exports = (api, projectOptions) => {
  api.registerCommand(
    'greet',
    {
      description: 'Write a greeting to the console',
      usage: 'vue-cli-service greet',
    },
    (args) => {
      console.log('👋  Hello')
    }
  )
}

此时，在项目根目录运行npx vue-cli-service greet，就会打出对应的 console 了。

2、本地插件通过 vue.config.js 传参

// vue.config.js
module.exports = {
  pluginOptions: {
    greet: {
      // 这里定义了参数 
      //  vue-cli-plugin-greet 插件可以使用 `projectOptions.pluginOptions.greet` 访问这些选项
      // 其他插件也可以拿到
      param: 'jack'
    }
  }
}

// my-commands.js
module.exports = (api, projectOptions) => {
  api.registerCommand(
    'greet',
    {
      description: 'Write a greeting to the console',
      usage: 'vue-cli-service greet',
    },
    (args) => {
      console.log('👋  Hello' + projectOptions.pluginOptions.greet.param);
    }
  )
}

运行npx vue-cli-service greet，就会打出对应的 👋 Hello jack 了。

3、本地插件通过命令行来传参

使用--key定义参数，使用args.key 访问。

// my-commands.js
module.exports = (api, projectOptions) => {
  api.registerCommand(
    'greet',
    {
      description: 'Write a greeting to the console',
      usage: 'vue-cli-service greet',
    },
    (args) => {
      console.log(args.customKeys)
    }
  )
}

运行npx vue-cli-service greet --customKeys hello， 就会打印出 hello。

Preset

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

// 示例
{
  "useConfigFiles": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0", // 显示的指定插件的版本
      "config": "airbnb", // 插件的其他选项
      "lintOn": ["save", "commit"]
    },
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  },
  "configs": { // 为其他集成工具添加配置，会被合并
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

Preset 的数据会被插件生成器用来生成相应的项目文件。你也可以通过 configs 选项为集成工具添加配置，这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或 相应的配置文件中。例如，当 "useConfigFiles": true 的时候，configs 的值将会被合并到 vue.config.js 中。

允许插件的命令提示

每个插件在项目创建的过程中都可以注入它自己的命令提示，不过当你使用了一个 preset，这些命令提示就会被跳过，因为 Vue CLI 假设所有的插件选项都已经在 preset 中声明过了。

在有些情况下你可能希望 preset 只声明需要的插件，同时让用户通过插件注入的命令提示来保留一些灵活性。

// preset.json 可以这样配置来允许注入命令提示
// 让用户可以根据提示交互来选取他们自己的 ESLint config
{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "prompts": true
    }
  }
}

远程 preset

你可以通过发布 git repo 将一个 preset 分享给其他开发者，这个 repo 应该包含以下文件：

  • preset.json: 包含 preset 数据的主要文件（必需）。
  • generator.js: 一个可以注入或是修改项目中文件的 Generator。
  • prompts.js 一个可以通过命令行对话为 generator 收集选项的 prompts 文件。

创建项目的时候通过 –preset 选项使用这个远程的 preset 了

# 从 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