vue-cli常用设置总结

什么是vue-cli

Vue CLI是一个基于Vue.js进行快速开发的完整系统，它可以帮助我们快速搭建Vue项目框架和实现一些常见的开发任务。在vue-cli中，主要支持了以下功能：

• 项目初始化
• 开发模式构建
• 生产模式构建
• 单元测试和端到端测试
• 插件集成与扩展

安装vue-cli

在使用vue-cli之前，我们需要先安装node.js，具体安装方式可以前往官网查看。安装完成后，在命令行中输入以下命令来安装vue-cli：

npm install -g vue-cli

安装完成后，我们就可以使用vue-cli了。

创建vue项目

在vue-cli中，我们可以使用vue init命令来创建vue项目。首先，我们需要执行以下命令来查看可用的模板：

vue list

然后，在选择了对应的模板后，我们可以在命令行中执行以下命令来创建vue项目：

vue init <template> <projectName>

其中，<template>是我们之前选择的模板名称，<projectName>指定了我们要创建的项目名称。

常见设置

以下是vue-cli中常见的一些设置：

设置ESlint

ESlint是一个JavaScript代码的静态检查工具，通过检查我们代码，帮助我们发现代码中的潜在问题。在vue-cli中，我们可以通过在package.json中添加一些配置，以启用ESlint功能。

例如，我们可以在package.json中添加以下代码，来启用 ESLint：

"eslintConfig": {
  "rules": {
    "semi": [ "error", "always" ],
    "quotes": [ "error", "double" ]
  },
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "plugins": [
    "vue"
  ]
}

其中，rules字段用于配置规则，env字段指定了环境，extends字段用于扩展配置，plugins字段用于在ESLint中使用插件。以上示例信息中，我们配置了禁止省略分号、必须使用双引号、允许浏览器、Node环境、vue和ESLint插件等内容。

开启CSS模块

在vue-cli中，默认情况下，所有的CSS文件都是全局作用域的，这意味着它们的样式可能会影响到其他组件的样式。

但是，通过开启CSS模块，我们可以让CSS文件作为局部作用域，仅仅影响到当前组件的样式。我们只需要在 <style> 标签内部添加 module 属性即可开启CSS模块。例如，我们可以在组件的vue文件中以下的代码来开启CSS模块：

<style module>
...
</style>

在CSS模块中，我们可以使用以下方式来访问CSS类和ID：

<template>
  <div :class="$style.myClass">...</div>
  <div :id="$style.myId">...</div>  
</template>
<style module>
  .myClass {
    ...
  }
  #myId {
    ...
  }
</style>

在上面的示例代码中，我们使用了 $style 来访问对应的 CSS 类或 ID。

总结

在vue-cli中，我们可以通过执行vue init命令来初始化vue项目，同时可以通过配置package.json文件实现常见的设置，例如在ESLint、CSS模块等功能。