vue构建仿饿了么外卖APP项目记录--1

零、vue基本用法

vue官网链接
webpack官网链接
node官网链接

1. 安装vue
   npm install vue
2. 初始化项目
   vue init webpack myproject （使用webpack作为项目初始化的模板）
3. 安装vue-cli
   npm vue-cli
4. 安装webpack
   用于编译打包各种资源
5. 运行项目
   npm start(npm run dev)

一、项目分析

1. 界面整体分为头部、内容区域两部分，内容区域分为商品、评价、商家三个tab。

2. 使用express（node.js框架）搭建服务器

   在./build/webpack.dev.conf.js文件下添加以下代码内容
   1️⃣在const HOST = ...之前插入以下片段
   ```
   const express = require('express')
   //请求server
   const app = express()
   //获取本地模拟数据
   let appData = require('../data.json')
   let seller = appData.seller
   let goods = appData.goods
   let ratings = appData.ratings
   
   let apiRoutes = express.Router()
   app.use('/api',apiRoutes)
   ```
   2️⃣在devwebpackConfig中的最后插入以下片段
   ```
   	before:function (app) {
   		app.get('/api/seller',(req,res)=>{
   			res.json({
               	errno:0,
     				data:seller
   			})
   		})
         app.get('/api/goods',(req,res)=>{
   			res.json({
               	errno:0,
     				data:goods
   	        })
   		 })
         app.get('/api/ratings',(req,res)=>{
   			res.json({
     				errno:0,
   	           data:ratings
   	        })
   		 })
   	}
   ```
   

3. 资源需求
   图片资源
   图标字体的制作与使用

   [iconmoon网站](https://icomoon.io/app/#/select)用于生成icon图标字体
   将download下来的文件夹中的fonts文件夹放到src下面的common中，将style.css放到stylus文件夹中，并改为styl文件。（此处需要安装stylus-loader）
   

   项目目录设计

   |-build
   |-config
   |-resource
   	|-img
   	|-PSD
   	|-SVG
   |-src
   	App.vue
   	|-common
   		|-fonts
   		|-stylus
   		|-js
   	|-components
   		|-header
   		|-seller
   		|-goods
   		|-ratings		
   	|-router
   		|-index.js
   |-static
   	|-css
   		|-reset.css
   |-data.json
   |-index.html
   |-package.json
   

   mock模拟后台数据

   mock一个data.json文件模仿后台推送的数据
   

二、项目开发之页面骨架开发

1. 组件拆分

   |-header
   |-content
   	|-seller
   	|-goods
   	|-ratings
   

2. router的使用

   使用vue-router写路由，用router-link组件中的to属性指定路径，用router-view改变点击不同的tab时显示的内容。
   

   header.vue部分

   	
   
         
   
           商品
         
         
   
           评价
         
         
   
           商家
         
       
       
   

   index.js部分

   export default new Router({
     linkActiveClass: 'active',
     routes: [
       {
         path: '/goods',
         component: goods
       },
       {
         path: '/seller',
         component: seller
       },
       {
         path: '/ratings',
         component: ratings
       }
     ]
   })
   

3. border-1px的实现

   定义一个minin.styl文件，定义一个border-1px函数，根据参数$color的不同显示不同的线条颜色。对当前元素添加after伪元素，使用绝对定位显示一个上边界
   

   border-1px($color)
     position: relative
     &:after
       display: block
       position: absolute
       left: 0
       bottom:0
       width: 100%
       border-top: 1px solid $color
       content: ' '
   

   定义一个base.styl文件，对不同的dpr设备进行像素的缩放（scaleY）
   在stylus下定义一个index.styl文件，import所有的styl文件，在main.js中引入index.styl即可。
   

到目前为止需要注意的问题

• eslint是否添加行末的逗号
• 使用npm安装stylus-loader模块，或者在package.json中添加需要的版本信息然后npm run dev
• 路径引用问题，注意相对路径
• vue-router使用的时候要通过Vue.use()注册
• stylus语法的使用