前端工程化-04.Vue项目简介

一.Vue项目-创建 

1.使用如图两种方式创建Vue项目

2.在此创建新项目

 

 点击创建项目

 创建成功！

二.Vue项目-目录结构 

三.Vue项目-运行 

启动后直接在下方找到连接端口

成功启动项目 

这个项目即为Vue中的自带项目Vue.app。修改其中的Home为Vue Home。ctal+s保存发现页面自动修改，这应用到了vue的热部署功能。

四.Vue项目-修改8080端口 

服务器tomcat部署java程序默认占用的端口号就是8080，因此要修改端口号。

找到vue.config.js文件，增加devServer，设定端口号即可。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  }
})