泰兴网站建设吧,网络规划师含金量,企业软件定制开发包括,阿里巴巴国际贸易平台版权声明
本文原创作者#xff1a;谷哥的小弟作者博客地址#xff1a;http://blog.csdn.net/lfdfhl 预备工作
请在本地创建文件夹用于存放Vue项目#xff0c;例如#xff1a;创建HelloWorld文件夹存放即将创建的Vue新项目。 创建Vue项目
首先#xff0c;请在DOS中将目录…
版权声明
本文原创作者谷哥的小弟作者博客地址http://blog.csdn.net/lfdfhl 预备工作
请在本地创建文件夹用于存放Vue项目例如创建HelloWorld文件夹存放即将创建的Vue新项目。 创建Vue项目
首先请在DOS中将目录切换至刚才创建的HelloWorld目录图示如下 请利用以下命令创建Vue项目命令如下
vue ui图示如下 刚命令执行完后浏览器将自动打开创建页面图示如下 请单击创建图示如下 请单击在此创建名字为test1的新项目图示如下 选择手动创建图示如下 在原有的基础上新增Router和VueX图示如下 选择Vue版本和错误级别图示如下 选择创建项目不保存预设图示如下 创建项目该过程可能耗时几分钟请耐心等待图示如下 此时在DOS中也能够看到Vue的项目创建过程。 Vue项目创建成功图示如下 安装devtools
devtools是一款浏览器插件它主要用于Vue项目调试从而极大地提高我们的开发和调试效率。
devtools插件地址为https://devtools.vuejs.org/guide/installation.html。
请选择在谷歌浏览器上安装devtools图示如下 安装插件图示如下 devtools安装完毕图示如下 至此完成了Vue项目创建。
运行Vue项目
在DOS中利用Ctrl c 终止脚本图示如下 利用cd命令进入到项目test1图示如下 利用命令npm run serve 启动Vue前端服务器图示如下 至此我们已经成功启动了前端服务器可利用http://192.168.0.104:8080/访问Vue项目图示如下 修改前端服务器端口
目前前端服务器默认的端口为8080为避免与后端项目的端口号冲突我们可以修改前端服务器端口。
该配置的官方参考文档为https://webpack.js.org/configuration/dev-server/#devserverport图示如下 请利用VSCode打开test1项目并在vue.config.js文件中设置新的端口号为7070并保存配置图示如下 代码如下
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070,}
})在DOS中利用Ctrl c 终止脚本图示如下 再次利用命令npm run serve 启动Vue前端服务器图示如下 由此可见前端服务器端口已经修改成功。利用http://192.168.0.104:7070/重新访问项目图示如下 配置前端服务器代理
为避免前后端数据交互联调可能产生的跨域问题我们可为前端服务器配置代理。该配置的官方参考文档为https://webpack.js.org/configuration/dev-server/#devserverproxy图示如下 类似地请在test1项目的vue.config.js文件中设置代理保存配置图示如下 代码如下
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {/api: {target: http://localhost:8080,changeOrigin: true}}}
})完成以上配置后请保存配置并重启前端服务器。完成以上代理配置后当前端页面发起以/api开头的请求时将调用后台服务器的http://localhost:8080接口。
