8-vue2环境安装

安装脚手架

npm install -g @vue/cli

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

创建项目

vue ui

这里可能有错误：解决地址https://blog.csdn.net/weixin_44349707/article/details/109688264

使用图形向导来创建 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': {
          target: 'http://localhost:8080',
          changeOrigin: true
        }
      }
    }
      
  })
  

Vue 项目结构

PS D:\2022.js\代码\第3章\client> tree src
D:\2022.JS\代码\第3章\CLIENT\SRC
├─assets
├─components
├─router
├─store
└─views

• assets - 静态资源
• components - 可重用组件
• router - 路由
• store - 数据共享
• views - 视图组件

以后还会添加

• api - 跟后台交互，发送 fetch、xhr 请求，接收响应
• plugins - 插件