Vue 2 环境准备

环境准备

安装脚手架

npm install -g @vue/cli

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

创建项目

vue ui

使用图形向导来创建 vue 项目，如下图，输入项目名

选择手动配置项目

添加 vue router（实现组件之间跳转） 和 vuex（实现组件之间共享）

选择版本，检查错误级别，创建项目

安装 devtools

• devtools 插件网址：https://devtools.vuejs.org/guide/installation.html

运行项目

进入项目目录，执行

npm run serve

修改端口

前端服务器默认占用了 8080 端口，需要修改一下

• 文档地址：DevServer | webpack

• 打开 vue.config.js 添加

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

添加代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理

• 文档地址同上

• 打开 vue.config.js 添加

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