cnpm install less less-loader -D // 安装开发依赖： less less-loader cnpm install vuex axios animate.css -S // 安装生产依赖：vuex axios animate.css npm run dev

2、项目资源

1) reset.css （清除浏览器默认样式）

在static文件夹下新建文件夹取名为css，将reset.css放在css文件夹里面。

2） data.json （模拟后台数据文件）

将data.json放在项目的根目录下（即直接myproject文件夹下）

3、创建目录结构

3.1 首先清除项目中的部分内容

1）删除assets文件夹及其包含的文件

2) 删除App.vue中引用该资源的组件

3）删除components文件夹下的HelloWorld.vue组件（注意要删除引用了Hello.vue组件的router中的相关代码）

3.2 调整后的最终项目结构：

3.3 修改APP.vue显示内容（深圳欢迎您）

运行npm run dev查看效果。

4、配置API接口

4.1 使用express框架启动一个Node服务器，配置API接口，模拟后台数据。

首先需要安装express测试依赖

cnpm install express -D　　//安装开发依赖： expresss

然后修改webapck.dev.conf.js文件中的代码

4.2 测试API

1）测试seller数据，在浏览器地址栏输入http://localhost:8080/api/seller

2）测试goods数据，在浏览器地址栏输入http://localhost:8080/api/goods

3）测试ratings数据，在浏览器地址栏输入http://localhost:8080/api/ratings

二、项目整体结构开发

1、在index.html中配置移动端视口并引入静态资源reset.css

在index.html文件中增加2行代码：

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="./static/css/reset.css">

此时页面上显示效果如下：

2 、在App.vue 中写代码header

3、自定义组件Header

在components文件夹下创建文件夹命名为header，在header文件夹下创建自定义组件Header.vue，在Header.vue中编写组件内容

在App.vue中引入header.vue，注册组件并使用组件。

此时运行npm run dev 即可以在页面上看到header.vue组件中写的内容。

4、使用vuex进行数据管理

在src下创建如下stroe文件夹结构，并写对应的初始代码：

1）getters.js的件的初始结构代码：

2）actions.js的件的初始结构代码：

3）types.js的件的初始结构代码：

4) seller.js/goods.js/ratings.js三个文件的初始结构代码均为如下：

5) index.js文件的初始结构代码：

6) 在main.js文件中引入store

需求1：页面上显示店铺信息

1、编写seller.js代码

2 、编写Header.vue代码

3 、查看页面显示效果

需求2：点击店铺头像，查看店铺详细信息，可以关闭详情页。（详情页 动画效果 ：从右向左滑动）

第一步：实现详情页展示出来

1、在components文件夹下新建detail文件夹，在 detail文件夹里 新建Deatil.vue组件，并编写 Deatil.vue组件 中的内容。

2、在Header.vue组件中引入 Deatil.vue 组件。

3、此时可以看到效果

第二步：实现点击店铺头像后，使用从右向左滑动的动画效果显示详情页。（ 使用vuex实现 显示、使用animate.css实现动画效果）。

1、在Detail.vue组件中增加v-show=‘isDetail Show ’，将 isDetail Show 的数据放在店铺相关的vuex文件中（即放在seller.js中）

2 、在seller.js中写代码

3 、在Header.vue中写代码

4 、在types.js中写代码

5 、在Detail.vue中添加显示动画效果

6、实现效果

第三步：实现点击详情页的关闭按钮，关闭详情页。

1、在Detail.vue中写代码

2 、在seller.js中写代码

3 、实现效果

第四步：实现详情页获取店铺详细信息。

1、 在Detail中写代码

2 、 实现效果

需求3：点击商品页，显示商品页的菜品信息

第一步：配置路由

第二步：获取菜品数据

第三步：新建组件Goods.vue并写相应代码，显示菜品信息

第四步：最终效果展示