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

一、安装nodejs环境

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,获取更多资源不迷路。
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值