饿了么-vur2.0实现总结一（项目创建及文档结构）

一、项目创建   (Ubuntu17.04系统)

 前提是安装了vue.js的环境，已经全局按装了：

$ npm install -g cnpm --registry=http://registry.npm.taobao.org    (安装cnpm ,检查下网址，防止拼写错了。。。)

$ cnnpm install -g vue-cli   (此步骤安装vue-cli工具，$vue 会出现命令，说明安装成功)

现在开始创建项目：

$ vue init webpack sell  (基于webpack打包模式的项目初始化，项目名称： sell)

$ cd sell (进入项目目录下)

一键下载项目依赖项：

$ sudo cnpm install (或者 $ sudo npm install)----------项目目录下会多出node_modules文件夹，存放项目依赖的文件

现在可以运行空项目了;

$ npm run dev (这个dev是项目下的package.json文件里面已经写好的快捷运行的名字dev)

项目目录：

build和config:webpack打包后的文件所在位置。其中webpack.dev.conf.js是主要修改的文件，build中配置了webpack的基本配置、开发环境配置、生产环境配置等。

node_modules:项目依赖的包,包括npm install ***进来的都在这。

resource：存放只用资源，包括图片等

src：源，存放自己写的文件（组件）和自动生成的App.vue和main.js及router文件夹

（自己新建的common存放常用的样式、字体、功能等，components放自己写的组件，每个组件单独文件夹，因为组件里面会用到图片等资源的话最好就近查找，eg: Header、Good 、ratings 等组件，引用时用相对路径引入，再注册即可（components:{ 引入的组件名}））

            

static放一些静态文件，下面的就是配置项：data.json是自己导入的数据，放的是项目用到的json数据

，

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

/* eslint-disable no-new */   是ES6语法，忽略用Vue实例化的时候赋值给值(变量),所以要单独给配一条规则,给new Vue这行代码上面加这个注释,把这行代码规则的校验跳过。

import Vue from 'vue';
import App from './App';
import router from './router';
import VueResource from '../node_modules/vue-resource';
import './common/stylus/base.styl';       // 样式引入stylus样式写法
import 'font-awesome/css/font-awesome.css';   // 引入图标字体font-awesome，后面可以在组建里面直接用

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

在这里设置路由：在data里面引入数据源： seller

seller是在webpack.dev.conf.js里面自定义的变量，用来向子组件传递数据。seller引入的是data.json里面的数据(12-18行)：

此时访问localhost:8080/api/goods可以看到goods相关的json数据。

3.index.html是入口文件，不引入文件，编译时会自动插入文件

PS: data.json数据 eg: seller.name,   seller.support[0].type

总结于 2017.12.13 夏天的wind-加油！