Vue 学习笔记：环境配置

文章目录

背景
ESlint 规范
统一缩进 2 个空格
添加 vue file 类型
配置 vue file 打开类型
配置 html 缩进忽略 vue 标签
npm 模块安装
编程启示录

背景

一个后台开发转前台时，入门过程还是比较费劲的，究其根源是，我的 javascript 水平仅仅停留在 ECMAScript 1.2 的版本上，即原生态的 js 开发技术。而 ECMAScript 已经于 2015 年发布 6.0 版本了，脚本开发语句已经跟后端开发一样，朝着系统化和模块化的方向发展了，甚至也需要类似 maven 的工具 webpack 进行打包。

今天就整理下这两天学习 vue 的 IDEA 配置部分吧。

ESlint 规范

eslint 规范，真是有点反人类，虽然本人还算是有代码强迫症的后端开发人员，但是也不能保证完全按它的规范来编码。捣鼓了一天的 eslint 规范和 prettier 和各种配置后，估计找不到能自动修复不规范的途径了，于是就放弃了，决定记住常见的规则：

缩进为 2 个空格
script 脚本不需要缩进
所有的符号后面需要空格
最后一个属性结尾也需要加额外的逗号

统一缩进 2 个空格

统一 JavaScript 和 html 文件的 Tab 缩进空格个数为 2 ，本地用的 IDEA 版本比较老，是 2016 的版本。Scheme default 修改后又会恢复原来的配置。而IDEA 在保存一个配置后，默认又生成一个 default(x) 的配置项，这个可以保存并生效，而且 Reformat Code 快捷键跟 windows 操作系统的快捷键冲突了，修改成 Alt + L 就可以很方便格式化 vue 代码了。
在这里插入图片描述

添加 vue file 类型

在 File and code template 配置中，添加 vue 类型的文件模板，以减少开发量，操作如下：
在这里插入图片描述
按照 eslint 规范，将 vue 必须包含的三个标签配置为模板内容：

<template>
  <div>
      {{msg}}
  </div>
</template>
<script>
export default{
  name: '${NAME}',
  data() {
      return {
          msg: '${NAME}',
      };
  },
  created() {
  
  },
  methods: {
  
  },
};
</script>
<style scoped>
</style>

配置 vue file 打开类型

前一步添加了 .vue 后缀的文件代码模板后，在 File 菜单中 new 操作右键会多出一种，且自动设置 export 模块名称为文件名：
在这里插入图片描述

为 vue 类型的文件关联打开方式为 html ：
在这里插入图片描述

配置 html 缩进忽略 vue 标签

vue 文件的 script 和 stye 标签需要遵守 eslint 规范，不需要缩进，那么就需要对 html 的文件格式进行配置，在不要缩进的元素中添加这两个要素。
在这里插入图片描述

npm 模块安装

npm 类似 maven 的功能，用来安装依赖的，依赖分为两种，为当前工程安装某个依赖模块，直接在该工程主目录下执行 npm install moduleName ，完成后会在 nodes_module 目录下增加该模块，就只被当前工程所依赖。而通过 npm install -g moduleName 安装的全局组件，可以被任意工程引用。

有时候不知道什么原因，就是无法导入某些模块，那么可以直接删除该 nodes_mudule 文件夹，重新为该工程安装依赖模块，前提是 cd projectDir 目录下。

IDEA 的 terminal 终端可以直接执行命令，就是在当前工程目录下，这点比较友好。