vue 项目给路径配置别名、统一代码风格配置

目录

1、给路径配置别名

2、Vue CLI 4 自动配置

3、开发代码统一风格配置

---

1、给路径配置别名

给路径配置别名，一般会在项目根目录下新建一个 vue.config.js 配置文件，里面是对 会被频繁引用的路径 配置别名，以方便开发，比如下面的代码，完成这些配置后，如果有别的文件需要引用 asset、components，就不需要写 ./../ 类似的相对路径了，直接写 ~asset、~components 就可以。

module.exports = {
  configureWebpack:{
    resolve:{/*给路径配置别名*/
      alias:{
        'assets':'@/assets',//@指的是src文件夹
        'components':'@/components'
      }
    }
  }
}

2、Vue CLI 4 自动配置

升级完 Vue CLI4 后新建项目的话，脚手架会自动帮你配置好别名，js/ts 里使用 @ 就可以代表 src 文件路径，css/scss 里使用 ~@ 就可以代表 src 文件路径，这样就不需要开发人员手动计算相对路径了。

// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'    //js/ts里使用 @

// @ is an alias to /src
@import '~@/assets/styles/test.scss'                    //css/scss里使用 ~@

//补充，如果你直接这么写 webstorm编辑器会报错，需要手动配置webpack configuration file
//E:\WorkCode\ProjectName\node_modules\@vue\cli-service\webpack.config.js

//以下是Vue CLI已经配置好的alias的ts.config.json配置文件
"paths": {
    "@/*": [
        "src/*"
    ]
}

3、开发代码统一风格配置

使用 vue-cli3 创建的项目，一般会自动在根目录下创建一个 .editorconfig 文件，里面写代码风格规范的配置。比如下面的代码，就是对开发风格的统一配置，配置一些缩进的方式、缩进的大小、末行加一个回车等

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

创建以上 editorconfig 文件后，如果已有项目的代码没有并不符合该配置，可以手动格式化以下代码：

（1）centOS 下webstorm 格式化代码的快捷键 Ctrl+Shift+l 

（2）windows 下 webstorm 格式化代码的快键键 Ctrl+Alt+l

（3）mac 下 webstorm 格式化代码的快捷键 Option+Command+l

如果是团队开发的项目，这个配置就显得尤为重要，因为有的人缩进喜欢使用换行，有的人喜欢使用空格，这就会给后期项目维护人员带来很多不必要的麻烦，所以这个配置文件还是很重要的。