一、 项目结构目录

其中：
- 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.
更多相关项目笔记可以参考 : http://blog.csdn.net/qq_36400099/article/category/7090446

最后

以上就是坚强老鼠为你收集整理的饿了么项目---2、项目搭建及本项目设计模块的参考资料一、 项目结构目录二、项目的package.json文件三、main.js结构四、项目构成的全部内容，希望文章能够帮你解决饿了么项目---2、项目搭建及本项目设计模块的参考资料一、 项目结构目录二、项目的package.json文件三、main.js结构四、项目构成所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。