一 環(huán)境搭建
1.工具安裝
npm install -g vue-cli <!-- vue-cli腳手架 必備 -->
2.初始項目
vue init webpack sell <!-- 在當(dāng)前文件夾下仗岸，建立名為sell的文件夾 -->
3.運行項目
cd sell <!-- 切換到sell文件夾 -->
npm run dev <!-- 運行項目 ps:貌似現(xiàn)在不用npm install -->
附錄：
sell <!-- 生成的項目結(jié)構(gòu) -->
build <!-- webpack相關(guān)配置文件 -->
config <!-- 同上 webpack相關(guān)配置文件 -->
node_modules <!-- node模塊-->
src <!-- 這里存放源代碼文件 -->
.babelrc <!-- ES6文件轉(zhuǎn)換為ES5格式 -->
.editconfig <!-- 編輯器配置 -->
.eslintignore <!-- Eslint語法忽略目錄 -->
.eslintrc <!-- Eslint語法配置文件 -->
.postcssrc <!-- 新加上的 css處理 -->
index.html <!-- 項目首頁 -->
package.json <!-- 項目依賴-->
package-lock.json <!-- 新加的 應(yīng)該也是項目依賴 -->
README.md <!-- 說明文件 -->
二 文件準備
1.圖標文件
1.登錄https://icomoon.io
2.導(dǎo)入svg文件 ,生成圖標字體
3.下載zip文件并解壓zip文件
4.復(fù)制fonts內(nèi)的所有文件到'sell/src/common/fonts'
PS:src目錄沒有相應(yīng)文件夾，需要新建文件夾
5.復(fù)制style.css文件到'sell/scr/common/stylus'矛辕，
并修改style.css內(nèi)的字體引用地址
PS:同上原押，需要建立相應(yīng)的文件夾
2.圖片文件
尚未上傳
3.模擬數(shù)據(jù)
?????(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.繼續(xù)往下尋找样眠，找到這段代碼，在后面添加代碼
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.分別訪問以下地址，返回數(shù)據(jù)代表成功
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
