手摸手带你使用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规则

配置eslint验证规则为eslint推荐规则,eslint推荐配置官网

"extends": [
  "eslint:recommended",// 添加 eslint推荐规则
  "plugin:vue/essential",
  "@vue/prettier"
],

2、配置eslint批量修复指令

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

package.json的script添加修复指令,修改检查指令。

"lint": "eslint --ext .js,.vue src"
"fix": "eslint --ext .js,.vue src --fix"

终端运行检查指令,检测项目文件格式问题:

npm run lint

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

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  //(强烈推荐)首页

 上一篇
npm组件发布之element-plugin npm组件发布之element-plugin
element-pluginelement-plugin 是基于element-ui开发的一个以提高编码效率、简化调用方式、提高代码维护性、适配屏幕分辨率、聚合基础组件为宗旨的“中间件”组件。现已开放的可用组件: ElFormDialog
2020-02-10
下一篇 
Eslint rules字典 Eslint rules字典
Eslint rules字典规则级别 “off” 或 0 - 关闭规则 “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出) “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发
  目录