Vue+Webpack+Element+Axios+vueRouter demo

一、搭建环境

1.进入命令行，npm install vue-cli -g 全局安装vue-cli

2.基于webpack模板初始化项目并创建名为posDemo的文件夹，vue init webpack posDemo

  等同于先创建文件夹在初始化，mikdir posDemo => cd posDemo => vue init webpack

项目名不能有大写，此时更换文件名为posdemo；

项目描述（可不写，直接回车）

作者（可不写）

可能会遇到选择构建方式Runtime Only还是Runtime+Compiler，常用的就是Runtime+Compiler，不需要自己手写render；Runtime Only相比Runtime+Compiler更加轻量，但是缺点是不能够编译jsx，在vue源码中，无论是render函数，还是template最终都是编译成render函数进行渲染的，所以，使用Runtime Only有时需要自己手动配置webpack对模板语法进行编译。

下不下载vue路由，这里是需要的，y

是否需要eslint检查代码错误和统一代码风格，n

是否建立Unit单元测试，n

是否安装e2e测试框架，n

可能会让你选择是否现在运行npm install，有三个选项，npm、yarn和稍后自己操作，这里选择第三个no,I will handle that myself

ok，初始化完成~

3.进入项目目录 -> 安装依赖 -> 运行 ：cd posDemo => npm install => npm run dev

4.在index.html文件中添加全局基本样式

html,body,#app {
      height: 100%;
      padding: 0;
      margin: 0;
}

新建Pos组件，相当于入口文件，在components下创建文件夹page，该文件夹用来放我们的页面模板组件，在page下创建Pos.vue文件，内容如下：

ps：scoped指局部样式

将Pos组件修改为入口文件，在src/router/index.js中做如下内容修改：

import Vue from 'vue'
import Router from 'vue-router'
import Pos from '@/components/page/Pos'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pos',
      component: Pos
    }
  ]
})

二、在index.html中引入阿里巴巴矢量图标样式（详见如何使用阿里巴巴的矢量图标库），内容如下：

此时就可以使用刚刚所选择的图标了，示例如下：

三、编写独立侧边栏导航栏组件

1.在src/components下新建common文件夹，该文件夹用来放共用组件，在common文件夹下创建LeftNav.vue，内容如下：

2.将LeftNav组件放入到模板中，先用import在App.vue中引入leftNav组件，引入后在vue的构造器里添加components属性，并放入我们的LeftNav组件，接下来在template中使用该组件，内容如下：

四、element布局

--------------------------------------------未完---------------------------------------------