一 项目准备

一 环境搭建

1.工具安装

npm install -g vue-cli 

2.初始项目

vue init webpack sell 

3.运行项目

cd sell      
npm run dev  

附录：

sell 
  build              
  config             
  node_modules       
  src                
  .babelrc           
  .editconfig        
  .eslintignore      
  .eslintrc          
  .postcssrc         
  index.html         
  package.json       
  package-lock.json  
  README.md          

二 文件准备

1.图标文件

1.登录https://icomoon.io
2.导入svg文件 ,生成图标字体
3.下载zip文件并解压zip文件
4.复制fonts内的所有文件到'sell/src/common/fonts' 
  PS:src目录没有相应文件夹，需要新建文件夹
5.复制style.css文件到'sell/scr/common/stylus'，
  并修改style.css内的字体引用地址
  PS:同上，需要建立相应的文件夹

2.图片文件

尚未上传

3.模拟数据

     (1).把data.json文件放到sell文件夹下

sell/data.json

     (2).编辑'sell/build/webpack.dev.conf.js'文件

1.找到如下代码，在后面添加代码
  const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')；
  const portfinder = require('portfinder')；
  
  var appData=require('../data.json');
  var goods=appData.goods;
  var ratings=appData.ratings;
  var seller=appData.seller;
  const express= require('express');
  const app=express();
  const apiRoutes=express.Router();
  app.use('/api',apiRoutes);
  
2.继续往下寻找，找到这段代码，在后面添加代码
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    
    before(app){
      app.get('/api/goods',(req,res) =>{
        res.json({
          errno:0,
          data:goods
        });
      });
      app.get('/api/ratings',(req,res)=>{
        res.json({
          errno:0,
          data:ratings
        });
      });
      app.get('/api/seller',(req,res)=>{
        res.json({
          errno:0,
          data:seller
        });
      });
    
PS:webpack新版本把'dev.server.js'合并到了'webpack.dev.conf.js'文件

     (3).重启项目，查看是否成功

1.npm run dev
2.分别访问以下地址，返回数据代表成功
  localhost:8080/api/goods;
  localhost:8080/api/ratings;
  localhost:8080/api/seller

三 其他准备

1.Eeslint语法

访问https://eslint.org

2.样式初始化

访问https://cssreset.com

3.stylus安装

1.npm install stylus
2.npm install stylus-loader