一、Vue-cli:腳手架安裝

a) 安裝nodejs；

b) win+r，輸入cmd進入命令列工具；

c) 安裝vue-cli：（-g：全域性安裝）

i. 方法一：npm install vue-cli -g：此方法連結的是國外網站會比較卡；

ii. 方法二：安裝cnpm，通過淘寶映象安裝：

npm install -g cnpm --registry=https://registry.npm.taobao.org，

然後：cnpm install vue-cli -g

d) Vue init webpack vueproject：
安裝webpack模板，專案名稱是vueproject

e) 彈出命令及選項：

	?Project name  （vueproject）   設定專案名稱：預設vueproject
	?Project description(A vue.js project)  專案簡介  
	?Author (******.com)      作者
	?Use Eslint to lint your code (Y/N)   是否使用eslint語法檢測
	?Pick an Eslint preset   選擇一個eslint配置
	?Setup unit tests with karma + Mocha?      設定單元測試
	?Setup e2e tests with Nightwatch?(y/n)      設定端到端測試

f) cd vueproject：進入vueproject專案資料夾

g) Npm install ：安裝依賴項

h) Npm run dev ：執行

二、eslintrc語法檢測配置說明

網址：中文官網：http://eslint.cn/docs/rules/

配置引數為0表示不去檢測該專案

三、路徑配置

路徑配置別名方便我們在專案製作中簡化程式碼。

build目錄下：webpack.base.conf.js

找到：resolve 下面的 alias：

alias{

‘路徑別名’: ’實際路徑’

}

四、路由配置

安裝路由：npm install vue-router

app.vue:

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item"><router-linkto="/goods">商品</router-link></div>
      <div class="tab-item"><router-linkto="/ratings">評論</router-link></div>
      <div class="tab-item"><router-linkto="/seller">商家</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
  importheaderfrom'./components/header/header.vue';

  export default{
    components: {
      'v-header': header
    }
  };
</script>

 

main.js

import  VueRouterfrom'vue-router';

import  goodsfrom'./components/goods/goods.vue';
import  sellerfrom'./components/seller/seller.vue';
import  ratingsfrom'components/ratings/ratings.vue';
Vue.config.productionTip = false;

/* eslint-disable no-new */

Vue.use(VueRouter);註冊


const router =newVueRouter({
  routes:[
  { path:'/goods',component: goods },
  {path:'/seller',component: seller },
  {path:'/ratings',component: ratings }
]
});
router.push('/goods');    設定預設開啟頁面

new Vue({
  router,
  render: (h) => h(App)提供一個檢視給 el 掛載
}).$mount('#app');

 

五、json資料引用

配置檔案：dev-server.js  ----build目錄下

const  express= require('express')  呼叫express框架
const  app =express()      例項化
var appData = require('../data.json');  呼叫data.json檔案裡面的資料
var seller = appData.seller;  data.json裡面的資料分類
var apiRoutes =express.Router();

apiRoutes.get('/seller',function(req,res){  req：傳入，res：傳出
  res.json({
    errno:0,
    data:seller
  })
});
app.use('/api',apiRoutes)

瀏覽器檢視對應資料：http://localhost:8080/api/seller

六、資料連線

a) 安裝vue-resource：npm install vue-resource --save

b) main.js

import  VueResource  from  'vue-resource';
Vue.use(VueResource);

c) app.vue

<template>
<v-header:goods ="goods"></v-header>
</template>
<scripttype="text/ecmascript-6">
  import  headerfrom  'components/header/header.vue';
  const  ERR_OK =0;
  export default{
    data() {      這裡的data必須為函式
      return{
        goods: {}  返回一個object資料到元件
      };
    },
    created() {   生命週期鉤子例項化的時候產生
      this.$http.get('/api/goods').then((response) => {  成功的回撥
        response = response.body;  獲取goods資料
        if(response.errno=== ERR_OK) {
          this.goods= response.data;
        }
      },(response) => {});失敗的回撥
    },
    components: {
      'v-header': header
    }
  };
</script>

d) header.vue

<template>
  <div class="header">
    {{ goods }}
  </div>
</template>

<script type="text/ecmascript-6">
export default{
  props: {
    goods: {
      type: Object   定義接收的資料型別
    }
  }
};
</script>

請求api：

·  get(url, [options])

·  head(url, [options])

·  delete(url, [options])

·  jsonp(url, [options])

·  post(url, [body], [options])

·  put(url, [body], [options])

·  patch(url, [body], [options])

 

其他：

eslintrc.js：程式碼檢測配置

package.json：專案資訊及依賴新增位置--dependencies

dev-server: json資料連線

安裝jQ依賴

npm install jquery --save-dev

 

安裝css依賴

npm install style-loader --save-dev

npm install css-loader --save-dev

npm install file-loader --save-dev

 

安裝less依賴

npm install less --save

npm install less-loader --save

配置less路徑：

build -> webpack.base.conf.js裡面的module的rules內新增

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

使用less：

<style lang="less">

</style>