AXENT-System 项目笔记cindy Liu4 MinutesApril 5, 2018

初次独自开发完整项目，使用vue.js+element-ui框架构建，两个月时间内完成了界面风格设计、交互功能实现、接通后台接口。该项目为河北优胜定制，记录每日各线陶瓷⽣产情况，包含移动端和PC端。使大厂陶瓷产线摆脱了手工记录生产数据的方式，提高了生产数据记录的准确性，能够直观展示产能利用情况供决策参考。

使用element-ui

命令行工具（CLI）

Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

选项/生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

beforeCreate

• 类型：Function
• 详细：
  在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

• 类型：Function
• 详细：
  在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  。
  。
  。
  。
  。

#

# 项目分享

https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md

vue-element-admin 是一个后台集成解决方案，它基于 Vue.js 和 element。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。