一、项目模块划分

在使用Vue进行项目开发的时候,一般会根据项目模块对目录进行划分,比如viewscomponentscommonnetwork等,将各自负责内容进行分类,方便管理和维护,以小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/,提示就自然出来了,如图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐