安装脚手架vue-cli
npm install -g vue-cli
建立项目
vue init webpack sell(sell是项目名称）
进入项目目录
cd sell
可以看目录结构:
ls ll -a
安装依赖
npm install
运行项目
npm run dev
项目都建立在src目录下，src目录下建文件夹 - 公共文件【common】- 公共文件下建3个文件夹：js、fonts、stylus
stylus：是css预处理器，和Less、Sass功能差不多，但语法略有区别
查看文档【IconMoon图标字*作】
字体图标库下载的包解压后：这里使用HBuilderX有 styl插件
1、复制fonts内容至 common - fonts 文件夹
2、复制 style.css 至common - stylus 文件夹
3、修改style.css 样式名称为有意义的：icon.styl
4、修改icon.styl文件为styl语法：删掉所有的分号；和大括号{}
复制后
复制后
删掉assets目录
目录构成
复制data.json数据到项目中 和index.html同级
其中data数据含义：
seller：商家
goods：商品
ratings：评论
调用本地数据接口 配置
//请求本地数据的配置方法 在const portfinder = require('portfinder')之后开始写
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
before(app){
app.get('/api/seller', function(req, res){
res.json({
errno:0,
data:seller
})
});
app.get('/api/goods', function(req, res){
res.json({
errno:0,
data:goods
})
});
app.get('/api/ratings', function(req, res){
res.json({
errno:0,
data:ratings
})
});
},
重新npm run dev
http://localhost:8080/api/seller
http://localhost:8080/api/seller
即可查看数据，查看文档安装谷歌插件，才能看到格式化后的json数据【谷歌浏览器中安装JsonView扩展程序】