vue 前端项目搭建方法（源码安装教程二 Java和python版通用）

关注

原创最新推荐文章于 2026-07-09 16:40:36 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

VUE项目练习大全（附github源码） vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。4:基于vue2.0的网易云音乐播放器，api来自于NeteaseCloudMusicApi，v2.0为最新版本 http://www.daiwei.org/vue-music/想用vue把我现在的个人网站重新写一下，新的风格，新的技术，什么都是新的。阅读详情

一、安装nodejs环境

1.1 nodejs 下载地址：https://registry.npmmirror.com/binary.html?path=node/
1.2 推荐安装v16.14.0版本，windows 下安装后需要配置环境变量，安装配置方法参照：https://www.cnblogs.com/isme-zjh/p/12729571.html
1.3 安装后依次输入下面的命令，查询版本

npm -v
node -v

二、安装vue/cli

vue已经进入了3.0的时代，具体的优点大家可以自行搜索，相关UI框架也已经升级了其3.0的版本。我们在项目中使用的最新版本做为web前端框架，不再是用2.x版本。

2.1 打开控制台，先执行清理缓存命令，防止发生异常错误，命令如下:

npm cache clean --force

若不执行缓存清理命令可能会出现下面错误：

info There appears to be trouble with your network connection. Retrying...

2.2 执行后执行安装vue/cli命令，注意若为mac系统，请在yarn或npm前加sudo 以便获取系统权限。

windows系统下执行下面命令：

yarn global add @vue/cli

或

npm install -g @vue/cli

mac系统执行下面命令：

sudo yarn global add @vue/cli

或

sudo npm install -g @vue/cli

执行命令后，等待几分钟后即可安装完成，推荐使用yarn，更方便快捷，安装完成后如下提示。

在这里插入图片描述

然后执行

vue -V

查看一下脚手架版本，确定版本是4.5。

三、使用 vscode 开发工具配置源码

3.1 vscode 下载地址：https://code.visualstudio.com/，自行下即可。
3.2 解压源码文件ideamerry_open_repair.zip ，解压后使用 vscode打开项目，打开后项目结构如下：
3.3 点击终端，新建终端安装yarn工具，如图

终端中输入下面命令，安装yarn工具

npm install yarn

安装后如图所示：
在这里插入图片描述

3.4 使用yarn命令安装项目依赖，执行下面命令，

yarn install

安装成功后如下图
在这里插入图片描述
修改vue.config.js中的代理devServer下proxy下的target，代理配置为了解决跨域问题，如下图：

3.5 使用yarn命令启动项目，命令如下：

yarn serve

启动成功后如下图：
在这里插入图片描述
直接点击地址或浏览器中输入地址访问即可，地址为：http://127.0.0.1:8081/baoxiu，访问后页面如下：

3.6 使用账号密码登录，账号：admin 密码：111111，登录后如下图：

四、打包部署vue项目

4.1 使用下面命令进行打包

yarn build

打包结束后，在项目路径下会出现dist目录，即我们要发布的包，如下图：
在这里插入图片描述

4.2 将 dist 目录上传到服务器，使用nginx访问dist即可，nginx配置参考如下：

        location /upload {
            alias   /Users/wangjie/upload;
        }
        location /baoxiu {
            root /opt;
            try_files   $uri $uri/ /baoxiu/index.html; 
            index  index.html index.htm;
        }
        location /repair {
             proxy_pass   http://127.0.0.1:8888/repair;
             proxy_set_header   Host             $host;  
             proxy_set_header   X-Real-IP        $remote_addr;  
             proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;  
             proxy_set_header   Cookie $http_cookie;  
             add_header Access-Control-Allow-Origin *;  
             add_header Access-Control-Allow-Headers Content-Type;  
             add_header Access-Control-Allow-Methods GET,POST,OPTIONS;  
             add_header Access-Control-Allow-Credentials true; 
             root   html;
        }