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是項目名稱 - 然后配置信息
- 基本信息直接回車確認
- 選擇配置項根據需求選擇
y/n
- 進入目錄
cd vuecli執行cnpm isntall安裝依賴 -
npm run dev運行項目
vuex
功能
- 實現各組件的數據交互
安裝
- 進入目錄
cd vuecli - 安裝vuex
cnpm install vuex --save
使用
-
main.js 增加以下內容
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,//增加 （調用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
功能
- 實現 ajax
安裝
- 進入目錄
cd vuecli - 安裝
cnpm install vue-resource --save
使用
- main.js 增加以下內容
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 }
})
- 然后就可以在項目中通過
this.$http來調用對應的方法（比如調用get和post請求）
created:function (){
this.$http.post("getList",{user:'tangcaiye'})
.then(function (data){
console.log(data)
})
}
其他的方法: api文檔
json-server
功能
- 搭建API數據接口
安裝
進入目錄
cd vuecli安裝：
cnpm intall json-server --save-dev
使用
- 首先創建一個db.json，放在根目錄（vuecli）下就可以了，它用于存放接口調用時的數據.比如：
{
"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')
})
現在在瀏覽器中訪問http://localhost:8081應該就能進到jsonserver頁面中
但因為jsonserver服務器的端口號跟我們的服務器端口不一樣，也就是跨域了，所以可以在vue-cli中設置代理:
- 設置代理
在config/index.js中的設置proxyTable的值為：
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8081/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
其中 '/api' 為匹配項，target 為被請求的地址
因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的
所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉為 '/'
如果本身的接口地址就有 '/api' 這種通用前綴，就可以把 pathRewrite 刪掉
- 訪問數據的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
進入目錄cd vuecli
cnpm install less-loader less --save-dev
使用
- 在 ***.vue 的文件內的 style 標簽內 加上 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
功能
- 輪播圖等
安裝
進入目錄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 -->
<!-- 導航點 -->
<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設置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什么事，那么這個屬性一定要是true
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000, //輪播時間
pagination : '.swiper-pagination',//導航點依賴
prevButton:'.swiper-button-prev',//上一頁依賴
nextButton:'.swiper-button-next',//下一頁依賴
scrollbar:'.swiper-scrollbar',//滾動條依賴
mousewheelControl : true,//是否開啟鼠標控制Swiper切換
observeParents:true,//當Swiper的父元素變化時，Swiper更新。
loop : true,//環路
autoplayDisableOnInteraction : false,//用戶操作后是否重啟autoplay
}
}
}
}
</script>
附錄1： NPM常用指令
-
npm -v: 查看npm安裝的版本 -
npm init: 引導你創建一個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: 查看當前目錄安裝的依賴 -
npm ls -g: 查看全局目錄安裝的依賴 -
npm view <modulename>: 查看包的package.json -
npm view <modulename> dependencies: 查看包的依賴關系 -
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 實例創建前狀態===============》');
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 實例創建完畢狀態===============》');
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 事件掛載前狀態===============》');
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 事件掛載結束狀態===============》');
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 數據更新前狀態===============》');
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 數據更新完成狀態===============》');
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 實例銷毀前狀態===============》');
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 實例銷毀完成狀態===============》');
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>
