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>
