手摸手带你使用Vue-Cli3搭建前端开发环境

vue-cli搭建前端开发环境指南

一、vscode编辑器配置

1、ESLint拓展安装

ESLint

  • 应用商店搜索安装ESLint
  • 添加保存文件时自动修复代码格式功能
// 文件->首选项->设置->在setting.json中编辑 添加代码:
"editor.codeActionsOnSave": {
    "source.fixAll": true
}
  • ctrl+s操作触发当前文件修复

Prettier - Code formatter

  • 应用商店搜索安装Prettier - Code formatter
  • 插件安装完成后,-> 配置拓展设置 prettier.requireConfig": true

1580977831(1).jpg

  • 格式化文档操作触发

二、项目创建

1、环境准备

  • Node.js 8.9 或更高版本
  • Vue-Cli3

2、创建项目

  • 确定项目所在目录,当前目录下打开Powershell窗口,输入指令:
vue create projectName
  • 选择手动安装类型(Manually)

注:以下为初次使用本配置教程,如果已按教程配置过,可直接选择已保存的配置创建项目!

QQ截图20200206170134.png

  • 选择依赖需求(上下键切换,空格选择,回车确认)

2.png

  • 选择是否使用history路由模式

3.png

  • 选择css预处理器

 4.png

  • 选择格式效验方式

5.png

  • 选择什么时候效验格式

 6.png

  • 选择测试框架

7.png
测试框架 Mocha 实例教程 - 阮一峰

  • 选择项目的配置文件放哪,这里选择第一项单独存放

8.png

  • 是否保存该配置作为后续项目的可选配置,选择是,并填写配置名称,后期项目直接采用此配置

9.png

等待安装完成后,用vscode编辑器打开项目。

三、配置eslint

1、配置eslint规则

vscode打开创建的项目目录,根路径下打开.eslintrc.js,具体eslint参数说明请见eslint参数文档,修改rules如下:

"no-alert": 0,
"no-array-constructor": 2,
"no-bitwise": 0,
"no-caller": 1,
"no-catch-shadow": 2,
"no-class-assign": 2,
"no-cond-assign": 2,
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-const-assign": 2,
"no-constant-condition": 2,
"no-continue": 0,
"no-control-regex": 2,
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"no-delete-var": 2,
"no-div-regex": 1,
"no-dupe-keys": 2,
"no-dupe-args": 2,
"no-duplicate-case": 2,
"no-else-return": 2,
"no-empty": 2,
"no-empty-character-class": 2,
"no-empty-label": 0,
"no-eq-null": 2,
"no-eval": 1,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": 2,
"no-extra-semi": 2,
"no-fallthrough": 1,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implicit-coercion": 1,
"no-implied-eval": 2,
"no-inline-comments": 0,
"no-inner-declarations": [2,"functions"],
"no-invalid-regexp": 2,
"no-invalid-this": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": 2,
"no-lone-blocks": 2,
"no-lonely-if": 2,
"no-loop-func": 1,
"no-mixed-requires": [0,false],
"no-mixed-spaces-and-tabs": [2,false],
"linebreak-style": [0,"windows"],
"no-multi-spaces": 1,
"no-multi-str": 2,
"no-multiple-empty-lines": [1,{"max":2}],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-nested-ternary": 0,
"no-new": 1,
"no-new-func": 1,
"no-new-object": 2,
"no-new-require": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-param-reassign": 2,
"no-path-concat": 0,
"no-plusplus": 0,
"no-process-env": 0,
"no-process-exit": 0,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-restricted-modules": 0,
"no-return-assign": 1,
"no-script-url": 0,
"no-self-compare": 2,
"no-sequences": 0,
"no-shadow": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-sync": 0,
"no-ternary": 0,
"no-trailing-spaces": 1,
"no-this-before-super": 0,
"no-throw-literal": 2,
"no-undef": 1,
"no-undef-init": 2,
"no-undefined": 2,
"no-unexpected-multiline": 2,
"no-underscore-dangle": 1,
"no-unneeded-ternary": 2,
"no-unreachable": 2,
"no-unused-expressions": 2,
"no-unused-vars": [2,{"vars": "all","args": "after-used"}],
"no-use-before-define": 2,
"no-useless-call": 2,
"no-void": 2,
"no-var": 0,
"no-warning-comments": [1,{"terms": ["todo","fixme","xxx"],"location": "start"}],
"no-with": 2,
"array-bracket-spacing": [2,"never"],
"arrow-parens": 0,
"arrow-spacing": 0,
"accessor-pairs": 0,
"block-scoped-var": 0,
"brace-style": [1,"1tbs"],
"callback-return": 1,
"camelcase": 2,
"comma-dangle": [2,"never"],
"comma-spacing": 0,
"comma-style": [2,"last"],
"complexity": [0,11],
"computed-property-spacing": [0,"never"],
"consistent-return": 0,
"consistent-this": [2,"that"],
"constructor-super": 0,
"curly": [2,"all"],
"default-case": 2,
"dot-location": 0,
"dot-notation": [0,{"allowKeywords": true}],
"eol-last": 0,
"eqeqeq": 2,
"func-names": 0,
"func-style": [0,"declaration"],
"generator-star-spacing": 0,
"guard-for-in": 0,
"handle-callback-err": 0,
"id-length": 0,
"indent": [0,4],
"init-declarations": 0,
"key-spacing": [0,{"beforeColon": false,"afterColon": true}],
"lines-around-comment": 0,
"max-depth": [0,4],
"max-len": [0,80,4],
"max-nested-callbacks": [0,2],
"max-params": [0,3],
"max-statements": [0,10],
"new-cap": 2,
"new-parens": 2,
"newline-after-var": 2,
"object-curly-spacing": [0,"never"],
"object-shorthand": 0,
"one-var": 1,
"operator-assignment": [0,"always"],
"operator-linebreak": [2,"after"],
"padded-blocks": 0,
"prefer-const": 0,
"prefer-spread": 0,
"prefer-reflect": 0,
"quotes": [1,"double"],
"radix": 2,
"id-match": 0,
"require-yield": 0,
"semi": [2,"always"],
"semi-spacing": [0,{"before": false,"after": true}],
"sort-vars": 0,
"space-after-keywords": [0,"always"],
"space-before-blocks": [0,"always"],
"space-before-function-paren": [0,"always"],
"space-in-parens": [0,"never"],
"space-infix-ops": 0,
"space-return-throw-case": 0,
"space-unary-ops": [0,{"words": true,"nonwords": false}],
"spaced-comment": 0,
"strict": 2,
"use-isnan": 2,
"valid-jsdoc": 0,
"valid-typeof": 2,
"vars-on-top": 2,
"wrap-iife": [2,"inside"],
"wrap-regex": 0,
"yoda": [2,"never"]

2、配置eslint批量修复指令

npm i eslint-plugin-vuefix@latest --save-dev

package.json的script添加指令

"fix": "node_modules/.bin/eslint --ext .js,.vue src --fix"

终端运行指令,批量修复代码格式

npm run fix

四、配置目录结构

目录结构本着“约定优于配置”的原则,约定目录名称和嵌套结构,尽量缩小自由发挥空间!

目录结构约定优先级:

  • 优先级 A:必要的
  • 优先级 B:强烈推荐
  • 优先级 C:推荐
  • 优先级 D:可选

添加api、request、styles、utils文件夹,各文件夹使用说明如图:

├─api         //(必要)    业务接口文件夹
│  └─业务功能名.js   //(强烈推荐) 创建以业务功能为名称的js文件
├─assets       //(必要)    静态文件目录
│  ├─icons      //(强烈推荐) 字体
│  └─images      //(强烈推荐) 图片
├─components     //(必要)    存放公共组件
│  └─公共组件.vue
├─requests      //(必要)  数据请求拦截统一配置文件夹
│  ├─index.js     //(强烈推荐)数据请求拦截统一配置文件
│  └─mock.js     //(可选)  
├─router       //(必要)  路由文件夹
│  ├─index.js     //(必要)  路由总导出文件
│  └─modules     //(必要)  存放业务路由文件
│      └─业务功能名.js //(强烈推荐) 导出所有业务功能路由数组
├─store        //(必要)  状态管理文件夹
│  ├─getters.js    //(可选)  状态复杂时,多状态统一配置文件
│  ├─index.js     //(必要)    状态总导出文件
│  └─modules     //(可选)  状态复杂时,分类存放状态文件
├─styles       //(必要)  公共样式文件夹
│  ├─common.less   //(必要)  存放公共样式,此处只约定名称,文件类型根据预处理更改
│  ├─reset.css    //(必要)  样式重置文件
│  └─variable.less  //(必要)  公共样式风格变量
├─utils        //(必要)  公共插件文件夹
│  └─公共插件js
└─views
    ├─App.vue
    ├─main.js
    └─功能名称        //(强烈推荐)按功能名称创建文件夹
        └─菜单名称      //(强烈推荐)按菜单名称创建文件夹
            ├─components //(强烈推荐)存放依赖页面
            └─Index.vue  //(强烈推荐)首页

更多原创文章,请到我的个人博客
copyright @ xmwarrior

阅读 1.1k

推荐阅读