https://github.com/zhaotoday/iview
http://admin.liruan.cn/#/login
用户：admin
密码：admin
基于 vue-cli + iView 的 Vue js 后台管理系统，在 vue-cli 基础上做了一些合理的修改和增强。功能包括：调试、构建、代码规范校验、单元测试、国际化等。
本项目的初衷是整理一套通用的 Vue js 单页应用模板，由于近期项目需要，才加入 iView。但是，你可以很轻松地从本项目中剥离 iView，获取一套通用的 Vue js 单页应用模板，或者加入其它 Vue js 的 UI 组件库。
如何剥离 iView？去除 加入 iView 组件库 的相关操作即可。
Vue、Webpack、ES6、vue-router、Vuex、Sass、PostCSS 等。
- Vue.js 中文网
- iView - 一套基于 Vue.js 的高质量 UI 组件库
- vue-router 中文网
- Vuex 中文网
- Vuex 通俗版教程
- Vuex 购物车示例
- Vue2.0 实践阶段性分享
- 单文件组件
- vue-devtools
- 一个极简的轻量级 Sass 工具库
- AJAX 简单封装及使用规范
- 基于 i18next 实现 Vue js 项目的国际化（整理中）
- 基于 CodeIgniter 的轻量级 PHP MVC 框架
- 老版本的浏览器上访问时提示升级
# 下载代码
$ git clone https://github.com/zhaotoday/vue.js.git
# 安装依赖
$ npm install
# 开发调试
$ npm run dev
# 构建
$ npm run build
# 执行单元测试
$ npm run unit
# 执行 e2e 测试
$ npm run e2e
# 执行所有测试
$ npm test理由：原 vue-cli 构建后的 index.html 存放在 dist 目录下。但通常，我们需要把整个项目提交到 git/svn，然后部署，这时候访问的默认首页需要是构建后的 index.html。
# 安装 node-sass、sass-loader
$ npm install --save-dev node-sass sass-loader<!-- 引入样式 -->
<style lang="scss" scoped src="./theme/styles/index.scss">
</style>/src/main.js：
// 引入全局样式
import './theme/global/index.scss'/{path}/{to}/MyComponent/theme/styles/index.scss：
/* 引入 Sass 工具集合 */
@import "../../../theme/utils/index";官方已经不推荐 vue-resource 作为 ajax 方案，请用 axios 代替。
# 安装 axios
$ npm install --save axios按需引入 polyfill，提高浏览器兼容性。
# 安装 core-js
$ npm install --save core-jspolyfill 在 /src/utils/polyfill.js 文件中引入：
import 'core-js/es6/promise'# 安装 vuex
$ npm install --save vuex|-- build // Webpack 项目构建
|-- config // 项目开发环境配置
|-- src // 源码目录
| |-- app // 业务代码
| |-- Articles // 文章业务模块
| |-- Home // 首页
| |-- Layout // 页面布局结构（除登录页外）
| |-- Login // 登录页
| |-- NotFound // 404 页
| |-- Root // 根页面
| |-- Unauthorized // 未授权页面（在开发权限相关系统时有用）
| |-- components // 公共组件
| |-- i18n // 全局国际化
| |-- models // 数据模型（主要在 store 中用到）
| |-- router // 路由配置
| |-- routes // 各业务模块路由配置
| |-- store // Vuex 状态管理
| |-- actions.js // 根级别的 actions
| |-- getters.js // 根级别的 getters
| |-- mutations.js // 根级别的 mutations
| |-- types.js // 根级别的 mutation types
| |-- modules // 各业务模块的局部状态管理
| |-- articles // 文章业务模块状态管理
| |-- styles // 样式
| |-- global // 全局样式
| |-- utils // Sass 工具集合（如：vars、mixin、function 等）
| |-- iview // 第三方 UI 库的样式（如：iView 等）
| |-- utils // 工具集合
| |-- helpers // 帮助函数集合
| |-- mixins // 混合
| |-- auth.js // 权限相关
| |-- env.js // 环境配置类
| |-- fastclick.js // 全局处理移动端 onclick 事件的延迟 300 ms 问题（仅移动端需要引入）
| |-- consts.js // 常量配置
| |-- i18n.js // 国际化类
| |-- init.js // 初始化
| |-- polyfill.js // polyfill
| |-- rest.js // RESTful 请求类
| |-- App.vue // 页面入口
| |-- main.js // 程序入口，加载各种公共组件
|-- static // 静态文件，如：图片、JSON 数据等
|-- .babelrc // babel-loader 配置
|-- .editorconfig // 定义代码格式
|-- package.json // 项目基本信息
按照 vue-cli 的 Hello 示例，组件（这里说的是组件文件夹）命名应遵循帕斯卡（pascal）命名法，如：MyComponent。
当然，也有很多人喜欢命名成 my-component 的形式。这个规范不是强制性的，你可以选一种适合自己的。
公用组件放在 /src/components 下。
|-- src // 源码目录
| |-- components // 公用组件
| |-- MyComponent // MyComponent 组件
| |-- index.vue // MyComponent 的入口
| |-- styles // MyComponent 的样式
| |-- index.scss // MyComponent 的样式入口
| |-- images // MyComponent 的图片
| |-- fonts // MyComponent 的字体
| |-- utils // MyComponent 的工具集合
| |-- i18n // MyComponent 的国际化
| |-- components // MyComponent 的子组件
| |-- ChildComponent // MyComponent 的子组件 ChildComponent，组件规范和 MyComponent 一致
业务组件放在 /src/app 下，也就是一个页面，对应一个路由。规范和公用组件一直。
# 安装 less-loader、less
$ npm install --save-dev less-loader less新建 /theme/global/index.less：
@import '~iview/src/styles/index.less';
/* 接下来开始覆盖 less 变量 */编辑 /src/main.js：
import iView from 'iview'
import './theme/iview/index.less'原因：
- [官网原话]Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器；
- 为了更好的支持 CSS3（IE10 开始支持较好），放弃对 IE9 的兼容；
- 用户在 IE9 及以下访问时给出升级浏览器提示，不至于让用户不知所措。
# 下载代码
$ git clone https://github.com/zhaotoday/update-your-browser.git<!-- 放在页面开头位置 -->
<script src="static/update-browser/scripts/bowser.js"></script>
<script>
if (!((bowser.msie && bowser.version >= 10) || bowser.msedge || bowser.webkit || bowser.firefox))
location.replace('static/update-browser/index.html')
</script>