Vue创建项目过程（vue ui）以及配置端口号 傻瓜教程

1.先cd到你需要创建项目的位置，

后进行

vue ui

2.在弹出的Vue项目管理器中点击创建，步骤如下几张图

 

这边 注意一下，router和vuex打开，Linter关闭

保不保留取决于你，可以保留，这样下次配置就可以省去上面这几步 

 

现在就等待创建完成了，

在命令控制窗口可以看到一直在下准备项目，等待完成即可。

 成功后会弹出这个窗口，可能有些电脑会没有 

 

回到之前的vue项目管理器那里，会发现变成了这个页面，成功创建，接下来用IDEA打开即可 

运行后打开网址出现这个界面，配置则全部完成。

 

有些朋友可能不知道怎么配置端口号，在vue项目管理器里是没办法配置端口号的，要进入到IDEA中，手动添加文件 vue.config.js 才可以覆盖掉原有的端口号

1.首先新建一个文件名为 vue.config.js

2.输入下面的代码，端口号设置为了1215，可以自己修改

const path = require("path");
const resolve = function(dir) {
    return path.join(__dirname, dir);
};
module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    outputDir: "dist",
    assetsDir: "static",
    lintOnSave: true, // 是否开启eslint保存检测
    productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
    chainWebpack: config => {
        config.resolve.alias
            .set("@", resolve("src"))
            .set("@v", resolve("src/views"))
            .set("@c", resolve("src/components"))
            .set("@u", resolve("src/utils"))
            .set("@s", resolve("src/service")); /* 别名配置 */
        config.optimization.runtimeChunk("single");
    },
    devServer: {
        // host: "localhost",
        /* 本地ip地址 */
        //host: "192.168.1.107",
        host: "0.0.0.0", //局域网和本地访问
        port: "1215",
        hot: true,
        /* 自动打开浏览器 */
        open: false,
        overlay: {
            warning: false,
            error: true
        },
        /* 跨域代理 */
        proxy: {
            "/api": {
                /* 目标代理服务器地址 */
                target: "http://m260048y71.zicp.vip", //
                // target: "http://192.168.1.102:8888", //
                /* 允许跨域 */
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    }
};