从零开始搭建vue脚手架

环境安装

• node 安装
  windows下官网下载exe安装
  检测是否安装成功
  node -v
  npm -v

• webpack
  使用npm安装，npm install webpack -g

• vue-cli3 脚手架
  指定安装cli3不安装4
  如果之前安装过vue-cli2的，要先卸载 npm uninstall vue-cli -g
  安装vue-cli3系列的最高版本
  npm install -g @vue/[email protected]

• 创建项目 命令行 执行 vue ui 在web页面中进行项目的初始化

安装完成后很简单的一个结构

入口中加载了APP.vue的组件

这里面引入了一个helloworld的组件并展示

这是一个默认地址，我们需要根据路由配置我们自己的地址，因此需要配置vue的路由功能

vue-router安装

重新npm install

添加路由的配置，新建一个router ,并新建index.js里面引入路由模块，并添加路由的配置，当访问/login的时候，展示Login.vue里面的内容，类似于后端的get请求的display视图。

需要在入口文件中加载路由模块，

需要把固定死的页面结构改为使用路由

编写login.vue

测试登录页面 http://localhost:8081/#/login

一定要把login放在最后，不能是 http://localhost:8081/login 这样子敲回车得到的地址是：
http://localhost:8081/login#/ 是无法匹配路由的。

配置网络请求

安装网络请求库

• npm install axios

• 新建网络请求相关的js文件
  

• 配置接口地址，根目录下新建js文件
  

• 后台接口
  

• js代码请求

  注意打印不要直接使用console.log，
  效果图