基于 Vue CLI 3 + iView 的后台管理系统,支持:开发调试、构建、代码规范校验等。
Vue、Webpack、ES6、Vue Router、Vuex、Sass、PostCSS 等。
用户: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 下,也就是一个页面,对应一个路由。规范和公共组件一致。
# 安装 less-loader、less
$ npm install --save-dev less-loader less
/src/styles/iview/index.less:
@import '~iview/src/styles/index.less';
/* 接下来开始覆盖 less 变量 */
/src/main.js:
import iView from 'iview'
Vue.use(iView)
[官网原话]统一 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
}
}
]
}
]
}