一 环境搭建
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
