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的更多相关文章

  1. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  2. 在vue项目中mock数据

    第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...

  3. Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开

    我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...

  4. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  5. vue-cli项目使用mock数据的方法(借助express)

    前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...

  6. vue项目模拟后台数据

    这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...

  7. vue项目初始化步骤

    项目初始化:() 1. 安装vue-cli :    npm install -g vue-cli 2.初始化项目:   vue init webpack  my-project 3.进入项目:  c ...

  8. 前端Vue项目——初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...

  9. vue项目配置Mock.js

    扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...

随机推荐

  1. 12.IDEA中自动导资源包

    在idea工程中,当你赋值一个类文件的部分代码,粘贴到另一个文件中时,需要导入原来文件中的包资源, 自动设置如下

  2. php unlink()函数使用

    最近在写个网站,需要上传图片,如果修改图片,就图片就没有用了,会占用服务器的硬盘资源,所以想到用unlink函数删除旧照片. 问题 : unlink函数只能删除 相对于函数执行文件的相对目录  或  ...

  3. C#关键字的个人理解与注释

    C#关键字注释:abstract:抽象as:类型转换(返回转换结果)base:基类bool:布尔类型break:条件中断语句byte:字节case:条件语句catch:异常捕获后执行char:16 位 ...

  4. __call__ 和 __str__ 魔术方法

    魔术方法,在python中,是通过触发的形式调用,之所以称为魔术方法,是因为不需要特地的打印或调用它,在某些特定的时候,他会自己调用,所谓的特定的时候,也是我们自己所输入的代码操作的,不是莫名其妙的触 ...

  5. 通用 mapper

    一.为什么需要通用 mapper 插件 通用 mapper 插件可以自动的生成 sql 语句. 虽然 mybatis 有逆向工程,可以直接生成 XxxMapper.xml 文件,但是这种生成的方式存在 ...

  6. 第二次组队赛 二分&三分全场

    网址:CSUST 7月30日(二分和三分) 这次的比赛是二分&三分专题,说实话以前都没有接触过二分,就在比赛前听渊神略讲了下.......不过做着做着就对二分熟悉了,果然做题是学习的好方法啊~ ...

  7. 洛谷 P1383 codevs 3333 高级打字机

    题目描述 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作: 1.T x:在文章末尾打下一个小写字母x.(t ...

  8. Centos6.4建立本地yum源

    https://jingyan.baidu.com/article/e9fb46e1aed8207521f7662c.html

  9. android蓝牙协议名词解释 OPP HFP HDP A2DP PAN

    各种蓝牙协议的全称: OPP:对象存储规范(Object Push Profile),最为常见的,文件的传输都是使用此协议. HFP:(Hands-free Profile),让蓝牙设备能够控制电话, ...

  10. Android Studio左边栏Project不见了?

    非常多Android Stuio刚開始学习的人可能会一不小心把左边的Project栏给关了.结果发现找非常久也没找到怎么再打开Project栏. 如图.点击左下角button,Project就出来了.