Vue项目搭建图文详解教程


版权声明


预备工作

请在本地创建文件夹用于存放Vue项目,例如:创建Vue2文件夹存放即将创建的Vue新项目。

创建Vue项目

首先,请在DOS中将目录切换至刚才创建的Vue2目录;图示如下:

请利用以下命令创建Vue项目;命令如下:

xml 复制代码
vue ui

图示如下:

刚命令执行完后,浏览器将自动打开创建页面;图示如下:

请单击创建,图示如下:

请单击在此创建名字为vue2basic的新项目,图示如下:

选择手动创建,图示如下:

在原有的基础上新增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命令进入到项目vue2basic;图示如下:

利用命令npm run serve 启动Vue前端服务器;图示如下:

至此,我们已经成功启动了前端服务器,可利用http://192.168.0.104:8080/访问Vue项目;图示如下:

配置Vue项目

为便捷后续开发,我们对刚创建的Vue项目进行完善和配置

修改前端服务器端口

目前,前端服务器默认的端口为8080;为避免与后端项目的端口号冲突,我们可以修改前端服务器端口。

该配置的官方参考文档为:https://webpack.js.org/configuration/dev-server/#devserverport;图示如下:

请利用VSCode打开vue2basic项目并在vue.config.js文件中设置新的端口号为7070并保存配置;图示如下:

代码如下:

javascript 复制代码
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;图示如下:

类似地,请在vue2basic项目的vue.config.js文件中设置代理保存配置;图示如下:

代码如下:

javascript 复制代码
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接口。

相关推荐
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果7 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰8 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半10 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage10 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
工业互联网专业10 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
你好龙卷风!!!11 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js