环境准备

# 安装脚手架

npm install -g @vue/cli

-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目

# 创建项目

vue ui

# 运行项目

进入项目目录，执行

npm run serve

# 修改端口

文档地址：DevServer | webpack (opens new window)

vue.config.js中添加：

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

1
2
3
4
5
6
7
8
9
10

# 添加代理

前后端联调，请求产生跨域问题，需配置代理；

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
  // ...
    
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:9527',
        changeOrigin: true
      }
    }
  }
    
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vue组件→