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的代碼了。