VSCode中Vue进行模块划分、设置别名以及解决路径不提示问题

一、项目模块划分

在使用Vue进行项目开发的时候，一般会根据项目模块对目录进行划分，比如views、components、common、network等，将各自负责内容进行分类，方便管理和维护，以小demo为例，目录结构为：

二、设置别名

如上，在划分完目录后，在项目开发中引用其他文件时，传统方式会采用../等相对路径来写，比如：

import Demo from './components/common/tabbar/TabBar'

当目录不在一个层级时，这更是一个可怕的存在，查看和维护相当不方便。

因此，我们需要对上述设置的目录设置别名，后续可以通过别名的方式来引用。

以Vue/CLI4为例，在项目根目录创建vue.config.js，编写配置：

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('assets',resolve('./src/assets'))
        .set('common',resolve('./src/common'))
        .set('network',resolve('./src/network'))
        .set('views',resolve('./src/views'))
        //set第一个参数：设置的别名，第二个参数：设置的路径
    }
}

如上，就完成了别名的设置，在项目中使用如下：

import MainTabBar from "components/contents/maintabbar/MainTabBar";

相比之前的相对路径引用方式，是不是更清晰简单明了呢。

三、路径提示

在完成别名设置后，你会发现，项目中路径提示不存在了，这是一个可怕的事情，那么该如何把路径提示给添加上呢？

1. 安装Path Intellisense插件

在VSCode中完成插件安装(过程不再赘述)，如下：

2. 扩展设置

点击插件的设置按钮，选择扩展设置，如图：

在打开的settings.json文件中，配置如下：

"path-intellisense.mappings": {
     "@": "${workspaceRoot}/src",
     "components": "${workspaceRoot}/src/components",
     "views": "${workspaceRoot}/src/views",
     "network": "${workspaceRoot}/src/network",
     "common": "${workspaceRoot}/src/common",
 }

3. 新建jsconfig.json

ps: 经测试，这个木有也不影响呢

在项目根目录下，新建jsconfig.json文件，添加配置：

{
    "compilerOptions": {
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

4. 验证效果

这样，在后续导入的时候，就可以根据提示来了，前提是先把前面的目录名输入完成，比如views/，提示就自然出来了，如图：