elementui展⽰列表模板_elementUI⼆次开发01快速搭建及项
⽬结构
⽬前，vue的⽣态圈⾮常繁荣，有CoreUI-Free-Bootstrap-Admin-Template，vue-admin，ivew，vue-material，vuetify，Keen-UI 等vue框架，不需要从头搭建项⽬。
element UI是⼀套⽐较优秀的前端框架。Element是 “饿了么” 出品的⼀套 Vue.js 后台管理界⾯的组件库，并且配有强⼤的学习⽂档。
官⽹地址 : element.eleme/#/zh-CN
源码地址：github/PanJiaChen/vue-element-admin
使⽤指南：element.eleme/#/zh-CN/component/installation
1. element-UI搭建
1.1 源码下载
· 到github⽹站下载最新的源码⽂件到本地。
· 或者Git命令克隆项⽬
> git clone github/PanJiaChen/vue-element-admin.git
1.2 项⽬运⾏
· 到项⽬路径
> cd vue-element-admin
· 安装依赖
> npm install
· 运⾏
> npm run dev
2. element-UI 技术架构    2.1 项⽬结构
├── build // 构建相关
├── mock // 项⽬mock 模拟数据
├── plop-templates // ⾃动创建项⽬⽂件
├── public              // 静态⽂件⽬录，类似static
│├── favicon.ico // favicon图标
│└── index.html // html模板
├── src // 源代码
│├── api // 所有请求
│├── assets // 主题、字体等静态资源
│├── components // 全局公⽤组件
│├── directive // 全局指令
│├── filtres // 全局 filter
│├── icons // 项⽬所有 svg icons
│├── layout // 布局(菜单栏、导航栏、主页⾯等)
│├── router // 路由
│├── store // Vuex，全局状态管理
│├── styles // 全局样式
│├── utils // 全局公⽤⽅法
│├── vendor // 公⽤vendor
│├── views // view
│├── App.vue // 页⾯⼊⼝
│├── main.js // 程序⼊⼝、加载组件、初始化等
│├── permission.js // 权限管理
│└── setting.js // 定义全局状态
├── tests // 测试⽂件夹
├── .editorconfig // 代码风格，如缩进等
├── .env.development // 开发环境下的配置⽂件
├── .env.production // ⽣产环境下的配置⽂件
├── .env.staging // 模拟环境下的配置⽂件
├── .eslintignore // eslint语法检测忽略⽂件
├── .eslintrc.js // eslint语法规则配置项
├── .gitignore // git忽略项
├── .l // git的Travis⾏为
├── fig.js // Babel 配置项
├── fig.js // Javascript单元测试的⼯具
├── jsconfig.json // 表⽰该⽬录是JavaScript项⽬的根⽬录
├── LICENSE // MIT许可证
├── package.json // 包管理
├── plopfile.js // 模板⼯具
├── fig.js // 给postcss⽤的，在stylus-loader编译成css之后，在通过postcss优化css
└── fig.js // 可选的配置⽂件，vue cli3.0配置其他参数使⽤
3. element-UI 主要组件
3.1 路径别名 alias
当项⽬逐渐变⼤之后，⽂件与⽂件直接的引⽤关系会很复杂，这时候就需要使⽤alias 了。有的⼈喜欢alias 指向src⽬录下，再使⽤相对路径⽂件。
configureWebpack: {name: name,
resolve: {
alias: {'@': resolve('src')
}
}
},
设定⽂件为fig.js，设定@代表src⽬录，所以：
前端页面模板import Layout from '@/layout' 即import Layout from 'src/layout'。
3.2 组件开发 components
这⾥的 components 放置的都是全局公⽤的⼀些组件，如上传组件，富⽂本等等，element UI已经提供了很多组件。    ⼀些页⾯级的组件建议还是放在各⾃views⽂件下，⽅便管理，导⼊即可。
3.3 页⾯开发 views
· layout布局
· 页⾯级别
功能页⾯都放在views⽬录下，按照功能设置⽬录，vue的页⾯都是以.vue结尾，该⽂件分为这⼏部分：
放置的是视图信息 view。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。