去除vue脚手架的严格代码模式以及vue脚手架项目结构介绍

vue-cli项目目录结构介绍

.
├── 'node_modules'     // npm下载包都在这个文件夹
├── 'public'  //我们主要是用来存放json数据，静态资源等              
│   ├── 'favicon.ico'
│   └── 'index.html'  // 作为入口模板,最后打包文件所在地，也是main,js 绑定的 dom
├── 'src'             // 整个工程文件目录 （入口文件）
│   ├── 'api'         // 创建用来管理接口的文件夹 
│   │   └── 'index.js'    // axios 入口使用
│   ├── 'assets'      // 静态资源管理负责管理图片文字一类的
│   │   ├── 'font'    // 存放字体库文件夹
│   │   └── 'img'     // 存放图片的文件夹
│   ├── 'components'  // 存放组件文件夹
│   │   └── 'HelloWorld.vue'     // 这是一个名叫HelloWorld.vue组件
│   ├── 'config'      // 项目配置的文件夹
│   │   └──  'index.js'          // 利用node 找包特性 起名index.js 可以快速导包

│   ├── 'router'      // 路由相关
│   │   ├── 'index.js'            // 利用node 找包特性 起名index.js
│   │   └── 'router.js'           // 路由配置
│   ├── 'store'        // Vuex状态管理文件夹

│   ├── 'views'        // 视图组件 和 公共组件
│   │   ├── 'About.vue'
│   │   └── 'Home.vue'
│   ├── App.vue     // 由于render 特性 所以需要一个被渲染的vue文件
│   ├── main.js     // 项目入口，文件打包会找这个文件，并且将这个文件的内容打包
├── .browserslistrc      //目标浏览器配置表
├── .editorconfig        // 编辑器配置
├── .gitignore           // 忽略用git提交省略的提交目录
├── babel.config.js      //  高级语法转低级语法
├── package.json
├── package-lock.json    // 锁版本包
├── postcss.config.js    //CSS预处理器
├── README.md
└── vue.config.js        // 项目自定义配置

去除vue-cli的严格模式

在脚手架的项目根目录里找到.eslintrc.js文件

将里面extends属下的 '@vue/standard' 注释掉就好了

附加：

1.只去除严格模式下对空格的要求

只需要在同样的.eslintrc.js文件里的rules属性里添加'space-before-function-paren' : 0 就能够去除对奇奇怪怪的空格严格要求

 2.修改vscode格式化文档的规格迎合脚手架的编译规则

在vscode中编辑器中可以用右键来选择格式化文档来一键进行对文档的换行对齐加分号等

但是在脚手架中的规则是eslintrc要求文档中中不要用双引号要用单引号,而格式化文档的功能是通通换成双引号。所以我们可以用一个方法去修改vscode格式化.vue文档的规则。

首先在项目的根目录下新建一个文件.prettierrc

然后填写入如下内容

{
	"semi":false,
	"singleQuote":true
}

保存后格式化.vue文件就不会在脚手架编译的时候报错了