vue cli3和vue cli2有一些区别，但是区别不会太大。

vue-cli3的大体项目结构图如下所示：

对应的package.json添加如下依赖：

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "element-ui": "^2.14.0",
    "vue-router": "^3.4.9",
    "vue-social-share": "0.0.3",
    "vue-axios": "^3.2.0",
    "axios": "^0.21.0",
    "vue-cookie": "^1.1.4",
    "vuex": "^3.5.1"
  }

在vue.config.js配置路径别名：

const webpack = require('webpack');
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    //...
    //配置路径别名
    configureWebpack: {
        resolve: {
            //配置路径别名
            alias: {
                'assets': '@/assets',
                'data': '@/data',
                'components': '@/components',
                'utils': '@/utils',
                'views': '@/views',
                'store:': '@/store'
            }
        }
    },
    //...
}

如果在idea在使用以@符合开头的路径别名时提示：'Module is not installed'，原因是vue3中没有了 webpack.config.js 文件，IDEA找不到这个文件了,所以提示这个信息。

解决方案如下：

1.双击shift键,打开全局搜索,输入webpack。 2.选择红框中的webpack，点击选择路径。 3.路径为项目中的 node_modules -> @vue -> cli-service -> webpack.config.js 文件。如下图： 4.点击确定后一般会立即生效，如果未生效,则重启下IDEA,即可解决问题。