步骤一

1.安装脚手架:npm install vue-cli -g
2.wepack生成html模版：vue init webpack ' 文件名'
3.安装axios、js-cookie、element-ui、stylus等等常用插件

步骤二

1.在main.js中引入router、element-ui等

import Vue from 'vue'import store from './store' //可以先忽略import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */new Vue({ el: '#app', router, store, render: h => h(App)})

2.可以写组件了

<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm login-container"> <el-form-item label="账号" prop="name">  <el-input v-model="ruleForm.name"></el-input> </el-form-item>  <el-form-item label="密码" prop="pass">  <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item>  <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form></template><script>export default { data() {  return {   ruleForm: {    name: '',    pass: ''   },   rules: {    name: [     { required: true, message: '请输入登录账号', trigger: 'blur' }    ],    pass: [     { required: true, message: '请输入登录密码', trigger: 'blur' }    ]   }  } },}

步骤三

走到这一步就很懵逼了吧，，， 我也是，所以还是先看到效果先吧

1.注册组件，在router文件这里

import Vue from 'vue'import Router from 'vue-router'import Login from 'components/login/index'const _import = require('./_import_' + process.env.NODE_ENV)//没用上当没看见吧，我就是要写这Vue.use(Router)export const constantRouterMap = [ {  path: '/',   component:Login,   name:'登录'  },]export default new Router({ routes: constantRouterMap})

emmmm....我猜组件应该渲染出来了，很好！next

步骤四

关键性的步骤到了，看起来很难的vuex

1.第一步，先写好接口方便调用，放在api文件夹里的login.js

import axios from 'axios'import { server } from './config'// 登陆export const requestLogin = params => { return axios.post(server + '/jade/user/loginManage.action', params, {  withCredentials: true, // 跨域凭证  transformRequest: [function(data) {   let ret = ''   for (const it in data) {    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'   } // axios官方文档关于怎么用每个参数是什么说的特别特别清楚，我百度过的   return ret  }],  headers: {   'Content-Type': 'application/x-www-form-urlencoded'  } }).then(res => {  return Promise.resolve(res.data) }, err => {  console.log(err) })}

2.利用js-cookie插件来存储用户信息

import Cookie from 'js-cookie'export function getToken() { return Cookie.get(TokenKey)}export function setToken(token) { return Cookie.set(TokenKey, token)}export function removeToken() { return Cookie.remove(TokenKey)}export function getRole() { return sessionStorage.getItem('rules')}