【手摸手，带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目，axios配置请求、解决跨域问题...

【手摸手，带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目，axios配置请求、解决跨域问题。

回顾一下上一节我们学习到的内容。已经将一个 usm_admin 后台用户 表的基本增删改查全部都完成了。并且通过swagger 测试了我们的接口信息，并且顺利通过测试。本节将通过VUE 脚手架生成一个vue-element ui 的基本项目。并且完成登录页面的开发和登录逻辑的整合等等。

知识储备

• 使用 vue-cli 生成一个基本的 VUE 项目
• vue-router vue 官方路由组件
• 整合 element ui
• 使用 asiox 封装一个发起请求的 http.js
• 解决开发时期的 跨域问题

vue cli:https://cli.vuejs.org/zh/

vue router: https://router.vuejs.org/zh/

asiox:http://axios-js.com/

element ui:https://element.eleme.io/

前端项目生成

当然，首先要保证你的计算机安装了 node js ,如果顺利安装了 node js ，可以命令行测试如下：

D:\Project>node -v
v12.16.1

安装 vue-cli

npm install -g vue-cli

生成 webpack 项目

使用命令初始化一个空项目，当然，这就要求你填写一些基本信息来初始化。

vue init <template-name> <project-name>

• 默认打包方式，一般就是 webpack

D:\Project>vue init webpack mall-pro-admin
? Project name mall-pro-admin
? Project description mall-pro-admin
? Author MRC <1763907575@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "