vue-cli3搭建项目

0. 官方文档
   https://cli.vuejs.org/zh/guide/installation.html
   使用 @vue/cli-v4.5.13 版本创建的项目中，vue 的版本为 v 3.0.0 ，使用最新的 script setup 语法，需要升级 vue 版本。

npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

1. 检查node和vue的版本
   
2. 在新文件夹下创建项目 vue create my-project，键盘上下键选择手动Manually

winpty vue.cmd create probject是解决git Bash中不能用上下箭头选择的问题。

3. 选择配置：空格键是选中与取消

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。

4. 启动项目

5. 安装elementUI

npm i element-ui -S
在main.js 中全局引入

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

6.安装axios

npm i axios -D

7.配置代理

使用vue inspect > output.js命令可以查看到Vue脚手架的默认配置。 但是需要在vue.config.js中覆盖配置。

module.exports={
	devServer:{
		port:3000,
		open:true,
		//proxy:'https://www.baidu.com'
		proxy: {
      		'/atguigu': {
        	target: 'http://localhost:5000',
			pathRewrite:{'^/atguigu':''},
        	// ws: true,
        	// changeOrigin: true 
      },
      '/demo': {
        	target: 'http://localhost:5001',
			pathRewrite:{'^/demo':''},
        	// ws: true, //用于支持websocket
        	// changeOrigin: true //用于控制请求头中的host值
      }
    }
	}
}