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

文章目录

一、项目模块划分二、设置别名三、路径提示1. 安装Path Intellisense插件2. 扩展设置3. 新建jsconfig.json4. 验证效果

一、项目模块划分

在使用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/，提示就自然出来了，如图：