vue學習之路(一)--vue-cli安裝+vue-router+vue-resource
一、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語法檢測配置說明
配置引數為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>