vue-cli 起步配置步骤

Vue-Cli 是 vue 专用起步工具，用 Vue-Cli 起步能够：
① 项目直接安装了Vue、Vue-Routre、ESLint等常用依赖
② webpack已经配置好了，webpack-dev-server已经集成了
③ 一些配置好的 git

一、配置起步环境

官网：https://cli.vuejs.org/zh/

全局安装 @vue/cli

npm install -g @vue/cli

初始化一个项目：

vue create my_project

问你是否使用更快的淘宝镜像，我选择 No.

C:\Users\Administrator\Desktop>vue create my_project
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

使用 Vue create 创建项目是使用默认配置（包含babel, eslint）还是手动选择。

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

使用默认配置的话可以直接回车。

Vue CLI v3.11.0
✨  Creating project in C:\Users\Administrator\Desktop\my_project.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[ .................] / fetchMetadata: sill pacote range manifest for @vue/cli-p

然后自动安装依赖，其实就是自动在创建的项目目录下进行npm install了，如果嫌慢的话可以 ctrl+c 打断，然后使用 cnpm install。

如果不选则默认来看看手动选择的情况。进入之后可手动选择一些特性

• Babel 编译作用
• TypeScript 强类型的 JS
• Progressive Web App (PWA) Support 渐进式 APP ，主要用于兼容移动端
• router Vue 路由
• Vuex Vue的状态管理器
• CSS 预处理器，可选择使用 less 、sass、 stylus等预处理器
• Linter / Formatter 代码检测和格式化
• Unit Testing 单元测试
• 还有暂时不考虑端到端测试(E2E Testing)

Vue CLI v3.11.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t

oggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

它就会让你选一些特性。括号前面加上星号说明选中没加，就没选中。上下键控制上下，空格进行确定/取消，a 全选。i 反选。

以上按自己需要的选择好，我选择了常用的五个，回车：
询问路由方式是否使用 history 模式。一般都是单页面开发不选择 history ，选择 hashhistory 所以这里输入 N 会表示 进入 hash 模式。

? Use history mode for router? (Requires proper server setup for index fallback

in production) (Y/n)

继续回车：
选择 样式表 CSS 的预处理器：一般我使用 less ，按自己项目要求选择。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported

by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

继续回车：

接下来进行 ESLint 代码规范等级配置（ 选择标准 ESLint + Standard config）标准配置：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择何时进行代码校验，此处选择在保存时进行检测：

>(*) Lint on save//保存及检测
 ( ) Lint and fix on commit

选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择单独保存在各自的配置文件中。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro

w keys)
> In dedicated config files
  In package.json

在未来的项目中使用：

Save this as a preset for future projects? (y/N)N
//输入 N 直接自动跳转
//选择 Y 会多一步
Save preset as：? Save preset as: 我的标准配置项目
//保存本次配置名字为`我的标准配置项目`，下次进行项目重建，会多个此次保存的配置名。
? Please pick a preset:
> 我的标准配置项目 (vue-router, vuex, less, babel, eslint)
  default (babel, eslint)
  Manually select features

至此命令行敲击完成，等项目初始化完成，下面的安装完成。

Vue CLI v3.11.0
✨  Creating project in C:\Users\Administrator\Desktop\my_project.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

[ .................] | fetchMetadata: sill pacote range manifest for once@^1.3.

装的时候可能会报错，请使用npm cache clean -f 来清除一下缓存。再进行重装。

Vue CLI v3.11.0
✨  Creating project in C:\Users\Administrator\Desktop\my_peoject.
�  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

npm ERR! Unexpected end of JSON input while parsing near '..."@vue/cli-overlay":
"^'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-09-11T0
1_04_28_478Z-debug.log
 ERROR  command failed: npm install --loglevel error

自动进入npm install时代。还是那句话嫌慢可以打断，使用 cnpm 装。

项目运行起步命令：

npm run serve

访问 ：http://127.0.0.1:8080/ 查看效果

二、 ESLint 使用介绍

ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

我们现在的环境已经集成所以不需要使用npm install eslint --save-dev安装了。

举例看下配置规则：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

"semi"（分号） 和 "quotes" （引号）是 ESLint 中 规则 的名称。数组里面第一个值表示错误级别，可以使下面的值之一：

• "off"or 0 - 关闭规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为1)

看一下在项目中的应用，在项目目录打开 package.json 文件找到：

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},//配置规则的地方
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

看着官网进行配置：http://eslint.cn/docs/user-guide/configuring。
我只配置四条规则：

"rules": {
  "indent": ["error", "tab"],
  "quotes": ["error", "double"],
  "semi": ["error", "always"],
  "key-spacing": [2, {
    "beforeColon": false,
    "afterColon": true
  }]
},
//缩进一个tab
//采用双引号
//语句结尾必须有分号
// 禁止在对象字面量的键和冒号之间存在空格;要求在对象字面量的冒号和值之间存在至少有一个空格

当不改变任何文件的情况下直接npm run serve运行文件，Eslint 开始起作用，文件报错。随机选取一个错误：

error: Missing semicolon (semi) at src\main.js:8:18:
  6 | new Vue({
  7 |   render: h => h(App),
> 8 | }).$mount('#app')
    |                  ^
  9 |

上面是 CMD 窗口出现的错误，现在更改一下 webpack 的配置，让 eslint 的错误在屏幕上显示。在和 package.json 同级目录下，创建 vue.config.js 文件。

配置内容参考链接：
https://cli.vuejs.org/zh/config/#lintonsave
vue.config.js是一个可选的配置文件，如果项目的（和package.json同级的）根目录中存在这个文件，那么它会被@vue/cli自动加载

链接内容为：

依图复制以下代码放入 vue.config.js：

module.exports = {
    "devServer": {
        overlay: {
            warnings: true,
            errors: true
        }
    }
};

此处就是平时手动配置的 webpack.config.js 。我们还可以配置端口号：port: 8100自定义 端口号，以及代理跨域等等。甚至可以直接 webpack-dev-server --content-base ./public --port 8080 命令行启动程序。

然后重新运行就发现错误上屏幕了，如下：

三、介绍目录文件

项目结构注解：

┣✈ .git ：git的配置文件
┣✈ .gitignore：配置 git 提交时忽略提交的文件
┣✈ node-modules：依赖的 node 库文件
┣✈ public：公共文件，如 index.html 文件和 style 样式文件
┗✈ src
    ┣✈ assets：资源文件img、css、html等等
    ┣✈ component：自己写的组件
    ┣✈ views 视图布局页面组件
    ┣✈ App.vue：vue 的根组件
    ┣✈ main.js：主函数入口文件
    ┣✈ router.js 路由文件
    ┣✈ store.js vuex的配置文件
┣✈ package.json：项目依赖文件
┣✈ README.md：一些常用命令介绍
┣✈ .browserslistrc：项目的目标浏览器的范围
┣✈ .editorconfig：代码编辑器配置
┣✈ .eslintrc.js：eslint配置文件，代码校验规则就是在这里
┣✈ babel.config.js：翻译；使用一些预设
┣✈ package-lock.json：版本管理使用的文件
┣✈ postcss.config.js：配置css规则的

• .gitignore 注意.gitignore 文件表示 git忽略的文件，一般来讲 node_modules 是要被忽略，不会被git托管的。
• .browserslistrc：browserslist
• eslintrc.js：配置文件详解 eslintrc.js

module.exports = {
  root: true,// 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。
  // 运行环境
  env: {
    node: true// Node.js 全局变量和 Node.js 作用域。
  },
  //规则继承
  //eslint内置推荐规则，就只有一个，即「eslint:recommended」
  'extends': [
    //vue 自己额外添加的规则，例如 v-if, v-else 等指令检测
    'plugin:vue/essential',// 额外添加的规则可查看 https://vuejs.github.io/eslint-plugin-vue/rules/
    '@vue/standard'
  ],
  // 自定义规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    // 解析器ESLint 默认使用Espree作为其解析器
    parser: 'babel-eslint'
  }
}

• .editorconfig：https://www.cnblogs.com/xieqian/p/10045610.html
  看一下 main.js顺便加一下注释并修改符合 ESLint 规则。

import Vue from "vue";
import App from "./App.vue";
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;

// $mount和el写法一样都是挂载点
new Vue({
    render: h => h(App),
}).$mount("#app");

四、默认安装配置 vuex 和 iview。

安装插件：

npm install --save-dev iview
npm install --save-dev vuex

配置 iview 我们还是的找到 node_modules\iview\dist 文件里面的 styles 样式文件，放到我们项目目录 public 里面，在 index.html 里面引入。

<link rel="stylesheet" href="<%= BASE_URL %>styles/iview.css">

稍微有点不一样，注意下的加"<%= BASE_URL %>后面在放地址，地址不能./，文件自动补，加了就多了。例如文件自动带的 favicon.ico <link rel="icon" href="<%= BASE_URL %>favicon.ico"><=源代码。渲染后=> <link rel="icon" href="/favicon.ico">所以你也可以认为"<%= BASE_URL %>" 就是补个斜杠。

为什么这么写?
参考：HTML 和静态资源 | Vue CLI https://cli.vuejs.org/zh/guide/html-and-static-assets.html#html
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容。

完成后，重新运行npm run serve。

改变配置 main.js 如下：

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import iview from "iview";
import store from "./vuex";
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;

Vue.use(iview);
Vue.use(Vuex);
// $mount和el写法一样都是挂载点
new Vue({
    render: h => h(App),
    store: new Vuex.Store(store),
}).$mount("#app");

需要注意的是：

现在的 webpack 比较强大，所有文件的后缀名都不需要写了！而且文件里面所有的 index 文件会自动加载。

App.vue 主逻辑测试代码：

<template>
    <div>
      <!-- 放入一个日历测试iview插件是否成功 -->
      <DatePicker/>
      <!-- 加法器 -->
      <h1>{{$store.state.couterStore.a}}</h1>
      <Button @click="$store.commit('couterStore/ADD')">按我加一</Button>
    </div>
</template>

<script>
export default {
  
};
</script>

<style scoped>

</style>

vuex 代码状态管理容器：

/couterStore.js
export default {
    namespaced: true,
    state: {
        a: 10,
    },
    mutations: {
        ADD(state){
            state.a++;
        },
    },
    actions: {

    }
};
//index.js
import couterStore from "./couterStore";
export default {
    modules: {
        couterStore,
    }
};

打开http://127.0.0.1:8080/ 查看效果：