一 ,使用脚手架,安装配置
-
, npm i -g vue-cli
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
清除 npm 缓存文件:npm cache clean --force
-
.项目搭建( 数据接口打开 npm start dev)
a.搭建 vue init webpack shop_admin 项目名称小写
b.设置
-
如果npm run dev 运行不成功, 则
自定义 ESLint 校验规则
在 .eslintrc.js 中添加 ‘space-before-function-paren’: ‘off’ 关闭
方法名字后的空格校验规则 如何添加一个新的功能???1 在 components 中新建一个文件夹(login),在文件中创建组件(Login.vue)
2 在 router/index.js 中导入组件(Login.vue)
3 配置路由规则
-
在项目中使用 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)
-
功能
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 组件中导入 axios4 配置路由规则
登录功能
<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