一 环境搭建

1.工具安装

npm install -g vue-cli <!-- vue-cli脚手架 必备 -->

2.初始项目

vue init webpack sell <!-- 在当前文件夹下，建立名为sell的文件夹 -->

3.运行项目

cd sell      <!-- 切换到sell文件夹 -->
npm run dev  <!--  运行项目 ps:貌似现在不用npm install -->

附录：

sell <!-- 生成的项目结构 -->
  build              <!-- webpack相关配置文件 -->
  config             <!-- 同上 webpack相关配置文件 -->
  node_modules       <!-- node模块-->
  src                <!-- 这里存放源代码文件 -->
  .babelrc           <!-- ES6文件转换为ES5格式 -->
  .editconfig        <!-- 编辑器配置 -->
  .eslintignore      <!-- Eslint语法忽略目录 -->
  .eslintrc          <!-- Eslint语法配置文件 -->
  .postcssrc         <!-- 新加上的 css处理 -->
  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