Skip to content
admin template based on Vue CLI 3 & iView. 基于 Vue CLI 3 + iView 的 Vue.js 后台管理系统。
Branch: master
Clone or download
Latest commit dd036af Apr 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public 更改网站名称 Nov 18, 2018
src 优化 Apr 10, 2019
.editorconfig
.gitignore
README.md 优化 Apr 10, 2019
babel.config.js
package.json 优化 Mar 25, 2019
vue.config.js 新增一些额外的 npm 包 Nov 18, 2018

README.md

关于

介绍

基于 Vue CLI 3 + iView 的后台管理系统,支持:开发调试、构建、代码规范校验等。

技术栈

Vue、Webpack、ES6、Vue Router、Vuex、Sass、PostCSS 等。

例子

线上的例子

https://admin.wxxd.cn/

用户:admin
密码:123456

服务端框架

https://github.com/zhaotoday/less.js

命令

# 下载代码
$ git clone https://github.com/zhaotoday/iview.git

# 安装依赖
$ npm install

# 开发调试
$ npm run serve

# 代码校验
$ npm run lint

# 构建
$ npm run build

规范

项目结构

|-- public                           // 网站公共目录
|   |-- favicon.ico                  // 网站图标
|   |-- index.html                   // 模板文件
|-- src                              // 源码目录
|   |-- components                   // 公共组件
|   |-- mixins                       // 混入
|   |-- models                       // 数据模型
|   |-- plugins                      // 插件
|   |-- router                       // 路由配置
|       |-- routes                   // 各个视图的路由配置
|   |-- store                        // 状态管理
|       |-- actions.js               // 根级别的 actions
|       |-- getters.js               // 根级别的 getters
|       |-- mutations.js             // 根级别的 mutations
|       |-- types.js                 // 根级别的 mutation types
|       |-- modules                  // 各业务模块的局部状态管理
|           |-- articles             // 文章业务模块状态管理
|   |-- styles                       // 样式
|       |-- global                   // 全局样式
|       |-- utils                    // Sass 工具
|       |-- iview                    // 第三方 UI 库的样式(如:iView 等)
|   |-- utils                        // JS 工具
|   |-- views                        // 视图
|       |-- articles                 // 文章页
|       |-- home                     // 首页
|       |-- root                     // 根页面
|   |-- app.vue                      // 页面入口
|   |-- main.js                      // 程序入口

公共组件规范

公共组件放在 /src/components 下。

|-- my-component              // my component 组件
|   |-- index.vue             // my component 的入口
|   |-- styles                // my component 的样式
|       |-- index.scss        // my component 的样式入口
|       |-- images            // my component 的图片
|   |-- utils                 // my component 的 JS 工具
|   |-- components            // my component 的子组件
|       |-- child-component   // my component 的子组件 child component

视图规范

视图放在 /src/views 下,也就是一个页面,对应一个路由。规范和公共组件一致。

加入 iView 组件库

提供 less 支持

# 安装 less-loader、less
$ npm install --save-dev less-loader less

自定义 iView 的主题

/src/styles/iview/index.less:

@import '~iview/src/styles/index.less';

/* 接下来开始覆盖 less 变量 */

链接

引入 iView

/src/main.js:

import iView from 'iview'

Vue.use(iView)

引入 iView Loader

[官网原话]统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle。

$ npm install --save-dev iview-loader
module: {
  rules: [
    {
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-loader',
          options: {}
        },
        {
          loader: 'iview-loader',
          options: {
            prefix: false
          }
        }
      ]
    }
  ]
}

参考

网址

相关链接

You can’t perform that action at this time.