小白 用vue脚手架实现接口连接的后台操作

一 ，使用脚手架，安装配置

1. , npm i -g vue-cli

   vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

   清除 npm 缓存文件：npm cache clean --force

2. .项目搭建( 数据接口打开 npm start dev)

   a.搭建 vue init webpack shop_admin 项目名称小写

   b.设置
   

3. 如果npm run dev 运行不成功， 则

   自定义 ESLint 校验规则

   在 .eslintrc.js 中添加 ‘space-before-function-paren’: ‘off’ 关闭
   方法名字后的空格校验规则 如何添加一个新的功能？？？

   1 在 components 中新建一个文件夹（login），在文件中创建组件(Login.vue)

   2 在 router/index.js 中导入组件（Login.vue）

   3 配置路由规则

4. 在项目中使用 element-ui 基于 Vue 2.0 的桌面端组件库
   安装：npm i element-ui -S
   //main.js 配置
   import ElementUI from ‘element-ui’

   import ‘element-ui/lib/theme-chalk/index.css’

   Vue.use(ElementUI)

5. 功能

   1 安装：npm i -S axios

   axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js 中。
   http://www.axios-js.com Axios 网站

   2 在 components 中新建一个文件夹（login），在文件中创建组件(Login.vue)

   3 在 router/index.js 中导入组件（Login.vue）
   5 Login.vue 组件中导入 axios

   4 配置路由规则

登录功能

<template>

  <div class="login-wrapper">

    <!-- el-form label-position="top" 设置label的位置 :model 用来给表单设置数据模型（对象）

      :rules 用来设置表单验证规则的

      ref 用来引用当前的表单组件

      el-form-item label 当前表单项的名称  prop 它的值是 model 对象中的一个属性

        当使用 表单验证 或者 表单重置 功能时，必须要提供该属性

      el-input v-model 实现双向数据绑定

    -->

    <!-- row 表示一行 -->

    <el-row type="flex" class="loginForm" justify="center" align="middle">

      <!-- col 表示一列 span 表示占用几份（共24份） -->

      <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" class="login-conten