vue 项目初始化、mock数据以及安装less
vue 创建一个项目
1、首先建立一个空文件夹,然后将这个文件夹要放到码云或者其他代码管理平台。
例如码云:
在码云上建立一个项目,然后在控制台进入这文件夹执行
git clone 地址是码云上创建的项目地址。这样就初始化到码云上成功了。
2、进入文件夹。全局安装 vue-cli
npm install -g vue-cli
国内建议使用 cnpm (安装淘宝镜像);使用npm 初始化的时候会经常出错.
安装过的便不需要再进行这一步了
3、初始化webpack
$ vue init webpack
如果想要重新在这个文件夹下边新建一个webpack 的项目的话
$ vue init webpack name
然后执行,如果是新建立的一个文件 就先进这个文件在执行下边的
$ npm install
$ npm run dev
这样项目就初始化完成了。
2、vue mock数据方法
vue mock数据使用 vue-resource 插件
npm install vue-resource --save
(a):
vue:2.2版本之前mock数据方法。在build文件下找到:dev-server文件,
var shopDate = require('../shop.json'); var shop = shopDate.shop; apiRoutes.get('/shop', function(req, res){
res.json({
errno: ,
data: shop
});
}); app.use('/api', apiRoutes);
在 build 文件夹下边的dev-server.js 中,找到
var app = express()
利用 express 启动项目的,所以在这个下边吧上变的那段代码写上。
这样访问数据的时候
created () {
this.$http.get('/api/goods').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goods = response.data;
// nextTick 数据加载和初始化是异步的 所以要在这里加上这个
this.$nextTick(() => {
this._initScroll();
// 左右联动
this._caluateHeight();
});
}
});
this.classMap = ['min', 'discount', 'guarantee', 'invoice', 'special'];
},
想要在网页上看到数据
把项目启动后的连接后边改为 api/goods 类似这样就行了。这样数据便可以请求成功了。
(b):新版vue项目相比: 少了两个文件,多了个图片。而少的dev-server.js文件正好是要进行模拟后台数据的,新的方法如下:
在webpack.dev.conf.js文件中
//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes) //找到devServer,添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 这里是你的json内容
errno: ,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 这里是你的json内容
errno: ,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
// 这里是你的json内容
errno: ,
data: ratings
})
})
}
当我们利用node 和 mongodb 创建数据的时候,就不需要在这样去 Mock数据了,这个方式是用来,前后端分离并且,前端不做任何关于接口数据的情况的。如果用了node mongodb 或者其他数据库,接口的写法连接 请参照 Node 目录里面的接口创建连接。
3、vue项目中如何安装使用less
第一步:
安装less依赖
npm install less less-loader --save
第二步:
修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", },
现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了。
vue 项目初始化、mock数据以及安装less的更多相关文章
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 在vue项目中mock数据
第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...
- Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开
我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- vue-cli项目使用mock数据的方法(借助express)
前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...
- vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...
- vue项目初始化步骤
项目初始化:() 1. 安装vue-cli : npm install -g vue-cli 2.初始化项目: vue init webpack my-project 3.进入项目: c ...
- 前端Vue项目——初始化及导航栏
一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
随机推荐
- 12.IDEA中自动导资源包
在idea工程中,当你赋值一个类文件的部分代码,粘贴到另一个文件中时,需要导入原来文件中的包资源, 自动设置如下
- php unlink()函数使用
最近在写个网站,需要上传图片,如果修改图片,就图片就没有用了,会占用服务器的硬盘资源,所以想到用unlink函数删除旧照片. 问题 : unlink函数只能删除 相对于函数执行文件的相对目录 或 ...
- C#关键字的个人理解与注释
C#关键字注释:abstract:抽象as:类型转换(返回转换结果)base:基类bool:布尔类型break:条件中断语句byte:字节case:条件语句catch:异常捕获后执行char:16 位 ...
- __call__ 和 __str__ 魔术方法
魔术方法,在python中,是通过触发的形式调用,之所以称为魔术方法,是因为不需要特地的打印或调用它,在某些特定的时候,他会自己调用,所谓的特定的时候,也是我们自己所输入的代码操作的,不是莫名其妙的触 ...
- 通用 mapper
一.为什么需要通用 mapper 插件 通用 mapper 插件可以自动的生成 sql 语句. 虽然 mybatis 有逆向工程,可以直接生成 XxxMapper.xml 文件,但是这种生成的方式存在 ...
- 第二次组队赛 二分&三分全场
网址:CSUST 7月30日(二分和三分) 这次的比赛是二分&三分专题,说实话以前都没有接触过二分,就在比赛前听渊神略讲了下.......不过做着做着就对二分熟悉了,果然做题是学习的好方法啊~ ...
- 洛谷 P1383 codevs 3333 高级打字机
题目描述 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作: 1.T x:在文章末尾打下一个小写字母x.(t ...
- Centos6.4建立本地yum源
https://jingyan.baidu.com/article/e9fb46e1aed8207521f7662c.html
- android蓝牙协议名词解释 OPP HFP HDP A2DP PAN
各种蓝牙协议的全称: OPP:对象存储规范(Object Push Profile),最为常见的,文件的传输都是使用此协议. HFP:(Hands-free Profile),让蓝牙设备能够控制电话, ...
- Android Studio左边栏Project不见了?
非常多Android Stuio刚開始学习的人可能会一不小心把左边的Project栏给关了.结果发现找非常久也没找到怎么再打开Project栏. 如图.点击左下角button,Project就出来了.