npm
安裝
- 安裝 node.js
- 安裝 git
git
- 安裝淘寶NPM鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
vue-cli
安裝
- 安裝vue-cli
vue init webpack vuecli
-
webpack是vue-cli的webpack模板 -
vuecli是項(xiàng)目名稱 - 然后配置信息
- 基本信息直接回車確認(rèn)
- 選擇配置項(xiàng)根據(jù)需求選擇
y/n
- 進(jìn)入目錄
cd vuecli執(zhí)行cnpm isntall安裝依賴 -
npm run dev運(yùn)行項(xiàng)目
vuex
功能
- 實(shí)現(xiàn)各組件的數(shù)據(jù)交互
安裝
- 進(jìn)入目錄
cd vuecli - 安裝vuex
cnpm install vuex --save
使用
-
main.js 增加以下內(nèi)容
import Vue from 'vue' import App from './App' import router from './router' import store from './vuex'//增加(引入vuex) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store,//增加 （調(diào)用vuex）鍵值對的 鍵 是 固定的 不能修改 template: '<App/>', components: { App } })?
在 src 目錄 新建文件夾 vuex
在 vuex 目錄 新建文件 index.js ( 下面是該文件的模板 )
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
}
const actions = {
}
const mutations = {
}
const getters = {
}
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
vue-resource
功能
- 實(shí)現(xiàn) ajax
安裝
- 進(jìn)入目錄
cd vuecli - 安裝
cnpm install vue-resource --save
使用
- main.js 增加以下內(nèi)容
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'
import Resource from 'vue-resource'//增加 (引入)
Vue.use(Resource)//增加（使用vue-resourece）
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
- 然后就可以在項(xiàng)目中通過
this.$http來調(diào)用對應(yīng)的方法（比如調(diào)用get和post請求）
created:function (){
this.$http.post("getList",{user:'tangcaiye'})
.then(function (data){
console.log(data)
})
}
其他的方法: api文檔
json-server
功能
- 搭建API數(shù)據(jù)接口
安裝
進(jìn)入目錄
cd vuecli安裝：
cnpm intall json-server --save-dev
使用
- 首先創(chuàng)建一個db.json絮吵，放在根目錄（vuecli）下就可以了享郊，它用于存放接口調(diào)用時的數(shù)據(jù).比如：
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
posts,comments,profile是我的接口的router.
- 然后在dev-server.js中添加代碼(將這塊代碼放在
var server = app.listen(port)之前就行)：
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use(apiRouter)
apiServer.listen(port+1, () => {
console.log('JSON Server is running')
})
現(xiàn)在在瀏覽器中訪問http://localhost:8081應(yīng)該就能進(jìn)到j(luò)sonserver頁面中
但因?yàn)?code>jsonserver服務(wù)器的端口號跟我們的服務(wù)器端口不一樣姥卢，也就是跨域了，所以可以在vue-cli中設(shè)置代理:
- 設(shè)置代理
在config/index.js中的設(shè)置proxyTable的值為：
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8081/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
其中 '/api' 為匹配項(xiàng)铣口，target 為被請求的地址
因?yàn)樵?ajax 的 url 中加了前綴 '/api'烤蜕，而原本的接口是沒有這個前綴的
所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'
如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉
- 訪問數(shù)據(jù)的demo
created:function (){
this.$http.get("http://127.0.0.1:8081/posts"})
.then(function (data){
console.log(data)//[{ "id": 1, "title": "json-server", "author": "typicode" }]
})
}
less-loader
功能
- 愉快的敲css代碼
安裝
- 安裝 less 和 less-loader
進(jìn)入目錄cd vuecli
cnpm install less-loader less --save-dev
使用
- 在 ***.vue 的文件內(nèi)的 style 標(biāo)簽內(nèi) 加上 lang='less'
- demo
<template>
<div class="test">
<div class="test-item"></div>
</div>
</template>
<style lang='less'>
.test {
width: 100px;
height: 100px;
background: #f00;
.test-item {
width: 50px;
height: 50px;
background: #ff0;
}
}
</style>
vue-awesome-swiper
功能
- 輪播圖等
安裝
進(jìn)入目錄cd vuecli
cnpm install vue-awesome-swiper --save
使用
- 全局配置 swiper 打開 main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
- 在 需要使用 swiper 的 ***.vue 上 使用 swipe模板
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<!-- 導(dǎo)航點(diǎn) -->
<div class="swiper-pagination" slot="pagination"></div>
<!-- 上一頁 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<!-- 下一頁 -->
<div class="swiper-button-next" slot="button-next"></div>
<!-- 滾動條 -->
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
// swiper options example:
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// notNextTick是一個組件自有屬性逾礁，如果notNextTick設(shè)置為true，組件則不會通過NextTick來實(shí)例化swiper杨赤，也就意味著你可以在第一時間獲取到swiper對象敞斋，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000, //輪播時間
pagination : '.swiper-pagination',//導(dǎo)航點(diǎn)依賴
prevButton:'.swiper-button-prev',//上一頁依賴
nextButton:'.swiper-button-next',//下一頁依賴
scrollbar:'.swiper-scrollbar',//滾動條依賴
mousewheelControl : true,//是否開啟鼠標(biāo)控制Swiper切換
observeParents:true,//當(dāng)Swiper的父元素變化時疾牲，Swiper更新植捎。
loop : true,//環(huán)路
autoplayDisableOnInteraction : false,//用戶操作后是否重啟autoplay
}
}
}
}
</script>
附錄1： NPM常用指令
-
npm -v: 查看npm安裝的版本 -
npm init: 引導(dǎo)你創(chuàng)建一個package.json文件，包括名稱阳柔、版本焰枢、作者這些信息等 -
npm install <modulename>: 安裝模塊 -
npm install <modulename> -g: 安裝全局模塊 -
npm install <modulename>@1.0.0: 安裝指定版本的模塊 -
npm install <modulename> -save: 安裝模塊并添加到package.json依賴中 -
npm uninstall <modulename>: 卸載模塊 -
npm cache clean: 清除緩存 -
npm help: 查看幫助命令 -
npm ls: 查看當(dāng)前目錄安裝的依賴 -
npm ls -g: 查看全局目錄安裝的依賴 -
npm view <modulename>: 查看包的package.json -
npm view <modulename> dependencies: 查看包的依賴關(guān)系 -
npm view <modulename> repository.url: 查看包的源文件地址 -
npm update <modulename>: 更新模塊 -
npm remove <modulename>: 移除模塊
附錄2： ***.vue 模板
<template>
<div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
}
},
created(){
},
methods:{
},
computed:{
}
}
</script>
<style>
</style>
附錄3： vue生命周期
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
beforeCreate: function () {
console.group('beforeCreate 實(shí)例創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 實(shí)例創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 事件掛載前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 事件掛載結(jié)束狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 數(shù)據(jù)更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 數(shù)據(jù)更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 實(shí)例銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 實(shí)例銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
