首页 > 技术文章 > Vue05-初始化项目

qiaozhiming123 2020-11-24 19:02 原文


## 一、 准备工作

###1. 初始化项目
vue init webpack itany
cd itany
cnpm install
cnpm install less less-loader -D
cnpm install vuex axios -S
npm run dev

### 2. 项目资源
|-reset.css
|-data.json

### 3. 创建目录结构
首先清除项目中的部分内容

创建如下目录结构:
|-data.json
|-static
|-css
|-reset.css

### 4. 配置API接口,模拟后台数据

在build文件夹下的dev-derver.js文件中
使用express框架启动一个Node服务器,配置API接口,模拟后台数据

var app=express();

读取数据

var appData=require('../data.json');

var seller=appData.server;

var seller=appData.goods;

var seller=appData.ratings;

//使用express配置路由,指定接口请求

var apiRoutes=express.Router();//定义一个路由

//配置请求路由和响应

apiRoutes.get('/seller',function(req,res){

res.json({

errno:0;//错误码

data:seller

});

}

);

//暴露API接口

app.use('/api',apiRoutes);

 

 

 

 

测试API:
http://localhost:8080/api/seller
http://localhost:8080/api/goods
http://localhost:8080/api/ratings


## 二、项目整体结构开发

推荐阅读