vue 项目初始化、mock数据以及安装less

vue 建立一个项目

一、首先创建一个空文件夹，而后将这个文件夹要放到码云或者其余代码管理平台。

例如码云：

　　在码云上创建一个项目，而后在控制台进入这文件夹执行

git clone 地址是码云上建立的项目地址。这样就初始化到码云上成功了。

二、进入文件夹。全局安装 vue-cli

npm install -g vue-cli

国内建议使用 cnpm (安装淘宝镜像)；使用npm 初始化的时候会常常出错.

安装过的便不须要再进行这一步了

三、初始化webpack

$ vue init webpack

若是想要从新在这个文件夹下边新建一个webpack 的项目的话

$ vue init webpack name

而后执行,若是是新创建的一个文件 就先进这个文件在执行下边的

$ npm install
$ npm run dev

这样项目就初始化完成了。

二、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: 0,
    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: 0,
      data: seller
    })
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      // 这里是你的json内容
      errno: 0,
      data: ratings
    })
  })
}

 

当咱们利用node 和  mongodb 建立数据的时候，就不须要在这样去 Mock数据了，这个方式是用来，先后端分离而且，前端不作任何关于接口数据的状况的。若是用了node mongodb 或者其余数据库，接口的写法链接 请参照 Node 目录里面的接口建立链接。

 

 

 

三、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的代码了。