一、安装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;
        }

五、总结

• 1、本文为vue前端项目源码搭建、运行、打包的方式，同时也是vue前端项目开发，第一步需要准备的所有工作。
• 2、本部分是整个报修系统的一部分，即后台管理前端部分，接下来会进行小程序源码运行、配置、打包、发布上线讲解。
• 3、欢迎关注我公众号 JeenWang，获取更多资源不迷路。