饿了么企业架构 饿了么组织机构

一、 项目结构目录

其中：

- build文件夹———配置了webpack的基本配置、开发环境配置、生产环境配置等

- config—————-配置了路径端口值等

- node_modules—–依赖的模块

- src文件夹————放置组件和入口文件

- - assets文件夹——-存放bootstrap等外部插件

- - common文件夹

- - - css————–公共的css文件：reset.css、fontstyle.css

- - - font————–字体图标文件

- - - js—————–公共的js文件

- components———各组件文件.vue

- main.js—————是我们的入口文件，主要作用是初始化vue实例并使用需要的插件

- App.vue————–是我们的主组件，所有页面都是在App.vue下进行切换的。其实也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

- index.html———–文件入口

二、项目的package.json文件

当需要在该项目中依赖Vue的扩展插件时，需要在package.json中配置，配置方法很简单：

1、进入Vue插件的guithub官网，查看需要安装的版本，例如vue-router 2.X的版本或者1.X 的版本

2、配置package.json的依赖项

"dependencies": {
    "vue": "^2.3.3",
    //vuex可以方便各组件的数据交互，该项目暂未用到
    "vuex":"^2.0.0",
    "vue-router": "^2.3.1",
    "vue-resource": "1.3.4",
    //vue的UI插件，有丰富的组件，该项目暂未用到
    "element-ui": "^1.0.0",
    "better-scroll": "^0.1.7"
  }

3、在项目目录下输入shell命令：npm install 或者淘宝镜像的：cnpm install。可以自动安装新添加的依赖插件。

这是我的完整package.json配置文件：

{
  "name": "vue711",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "caili",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.3.3",
    //vuex可以方便各组件的数据交互，该项目暂未用到
    "vuex":"^2.0.0",
    "vue-router": "^2.3.1",
    "vue-resource": "1.3.4",
    //vue的UI插件，有丰富的组件，该项目暂未用到
    "element-ui": "^1.0.0",
    "better-scroll": "^0.1.7"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "stylus-loader": "^2.1.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^12.1.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

三、main.js结构

主要引入依赖的各个文件。

//引入vue
import Vue from 'vue';
//引入vue的路由插件
import VueRouter from 'vue-router';
//引入vue的后台数据请求
import vueResource from 'vue-resource';
//引入主组件
import App from './App';
//引入路由组件
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'
//引入初始化css
import './common/css/reset.css';  
//引入公共的主Stylus
import './common/stylus/index.styl';  

//设置为 false 以阻止 vue 在项目打包后进行代码调试
Vue.config.productionTip = false;
//引入Vue扩展插件模块
Vue.use(VueRouter);
Vue.use(vueResource);

//定义路由
const routes = [
 //也可以是一个命名的路由 redirect:{name:'goods'}
  {path:'/',redirect:'/goods'},
  { path: '/goods', component: goods,name:'goods' },
  { path: '/ratings', component: ratings,name:'ratings' },
  { path: '/seller', component: seller,name:'seller' }
];
//创建路由实例
const router = new VueRouter({
  // ES6缩写语法，相当于routes:routes
  routes  
});
//结合路由命名，设置导航钩子函数
router.afterEach((to,from,next)=>{
    document.title = to.name;
})
//创建vue实例并挂载
const app = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});
//导航式编程  
//router.push('/goods');
/*
* 引入bootstrap
import $ from 'jquery';
import './assets/css/bootstrap.min.css';  
import './assets/js/bootstrap.min.js';
*/

实例化vue的配置项：

const app = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
});

1. el:值为页面上已经存在的dom元素，此元素作为vue实例的挂载目标，可以是css选择器，也可以是HTMLElement实例；
   实例挂载之后，访问元素：vm.$el.
2. template:模板中内容将会替换挂载的元素，挂载的元素的内容将会被忽略

四、项目构成

1. 使用vuejs作为项目的javascript框架，Vue官网链接地址，有vuejs的教程与API 。
2. 使用webpack模块化项目编程，管理项目的所有依赖文件，可参考简书关于此的介绍 http://www.jianshu.com/p/42e11515c10f
3. 使用stylus替代css编写样式
4. 使用最新Ecmascript6，参考：ECMAScript 6 入门://es6.ruanyifeng.com/
5. 使用Flex布局
6. 使用vue-cli搭建项目脚手架，可参考我的上一篇文章 饿了么项目—1、vue-cli快速构建项目（包括兼容老项目时需引入bootstrap、jquery的方法）
7. 使用vue-resource请求后台数据
8. 使用vue-router实现页面内路由跳转
9. 使用better-scroll实现接近Android原生的滚动效果
10. 关于设备像素比，如何实现移动端一像素问题
11. Vue过渡与动画等等

结束：
完成一个项目重要的是累计更多的知识，本博客一方面是完成项目后的知识整理，一方面给大家一些相关的参考。
我的项目源码地址：https://github.com/cai-li/MyProject.
更多相关项目笔记可以参考 :