vue 使用图形向导来创建 vue 项目

1、安装脚手架

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

npm install -g @vue/cli

2、创建项目

• 在目录下执行命令

vue ui

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

• 选择手动配置项目
  
• 添加 vue router 和 vuex
  
• 选择版本
  

3、安装 devtools

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

4、启动项目

• 进入创建的项目目录
  
• 运行项目

npm run serve

• 进入项目首页
  

5、修改端口号

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

文档地址：https://webpack.js.org/configuration/dev-server/#devserverport

• 打开 vue.config.js 添加

devServer: {
    port: 8088,
},

• 重新启动
  

6、配置代理

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

• 打开 vue.config.js 添加

proxy: {
   '/api': {
      //后端接口
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
},

结束！！！！！！！

“孩子们，这就是人生——人生就是一次无法重复的选择，”，面对无法回头的人生，我们只能做三件事：郑重的选择，争取不留下遗憾；如果遗憾了，就理智的面对它，然后争取改变；假若也不能改变，就勇敢地接受，不要后悔，继续朝前走。--苏格拉底