01、node安装和生成vue项目
安装node第三步选择其余步骤NEXT
淘宝镜像d:\nodejs>npm install -g cnpm --registry =
https://registry.npm.taobao.org
添加对应的文件夹npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"(可以不做不啊？)
vue.js安装 npm install -g vue-cli
cd到vue安装目录 vue init webpack-simple 项目名称（小写）
简单模式
vue init webpack 项目名称（小写）
标准模式
项目生成好后 cd 到项目文件夹下 进行npm install 操作下载依赖环境
使用npm run dev 启动服务 （ctrl+c停止服务）
使用npm run build 打包服务
02、路由和vue-resource/axios
路由
import Vue from 'vue'
import Router from 'vue-router'
/*import Hello from '@/components/Hello'*/
import GoodsList from '@/views/GoodsList'
引入对应的界面 可以不加.vue后缀
import Title from '@/views/Title'
import Image from '@/views/Image'
import Cart from '@/views/Cart'
Vue.use(Router)
export default new Router({
为hash时浏览器
http://localhost:8080/
不会家“#”
routes: [
{
path: '/goods',
这里可以配置动态路由 path: '/goods/:goodId'
配置界面获取参数方式{{$route.params.goodId}}
也可能是path:'goods/:goodId/user/:name'
配置界面获取参数方式{{$route.params.goodId}} {{$route.params.name}}
浏览器请求是
http://localhost:8080/#/goods/23232/user/lisi
name: 'goods',
//命名视图
可以直接在App.vue显示页面拼接代码部分
<router-view class="main"></router-view>
<router-view class="left" name="title"></router-view>
<router-view class="right" name="img"></router-view>
components:{
default : GoodsList,
title : Title,
img : Image
}
//普通模式
配置完成之后 其它页面做拼接
<router-link to="/goods/title">显示商品列表</router-link>
<router-link to="/goods/img">显示商品图片</router-link>
<div>
<router-view></router-view>
</div>
// component: GoodsList,
// children:[
// {
// path: 'title',
// name: 'title',
// component: Title
// },
// {
// path: 'img',
// name: 'img',
// component: Image
// }
// ]
},
{
// path:'/cart',
页面的跳转方式<router-link to="/cart">跳转到购物车页面</router-link>
path:'/cart/:cartid',
<!--命名路由-->
<router-link v-bind:to="{name:'cart',params:{cartid:123454}}">跳转到购物车页面</router-link>
这部分也可以在页面做跳转
<button @click="jump">button -- 跳转到购物车页面</button>
<script>
export default{
data(){
return {msg: 'hello vue'}
},
methods:{
jump(){
// this.$router.push("/cart")
// this.$router.push({path:'/cart?goodsId=123'})
this.$router.go(-2)
}
}
}
</script>
name: 'cart',
component: Cart
}
]
})
vue-resource
<head>
<meta charset=
"UTF-8"
>
<title>
Title
</title>
<link rel=
"stylesheet"
href=
"../css/bootstrap.min.css"
>
<script src=
"../node_modules/vue/dist/vue.js"
></script>
<script src=
"../node_modules/vue-resource/dist/vue-resource.min.js"
></script>
用npm引入vue-resource 在cmd中
项目文件夹下 npm install vue-resource --save 成功引用后再package.json文件中可以看到
</head>
<body>
<div id=
"app"
class=
"container"
>
<h1>
vue-resource 插件讲解
</h1>
<!--<a href="javascript:;" class="btn btn-success" v-on:click="get">GET请求</a>-->
<a href=
"javascript:;"
class=
"btn btn-success"
@click=
"get"
>
GET请求
</a>
<a href=
"javascript:;"
class=
"btn btn-success"
@click =
"post"
>
POST请求
</a>
<a href=
"javascript:;"
class=
"btn btn-success"
@click =
"jsonp"
>
JSONP请求
</a>
<a href=
"javascript:;"
class=
"btn btn-success"
@click =
"http"
>
http请求
</a>
<div>
<span>
{{msg}}
</span>
</div>
</div>
<script>
new Vue({
el:"
#app
",
data:{
msg:''
},
mounted:function(){
/*请求拦截器*/
Vue.http.interceptors.push(function (request , next) {
console.log("request 请求初始化")
next(function(){
console.log("request 请求响应")
return request ;
})
})
},
http:{
/*全局请求路径配置*/
root:"
http://localhost:63342/myvue/
"
当不在项目的根目录下面就需要配置全局请求
},
methods:{
get : function(){
this.$http.get("package.json",{
params:{
userId:"101"
},
headers:{
token:"123415464"
}
}).then(res=>{ =>
这是ES6的写法 相当于function(res){}
this.msg=res.data ;
},error=>{
this.msg = error ;
});
},
post : function(){
this.$http.post("package.json",{
userId:102
},{
headers:{
access_token:"abc+post"
}
}).then(function(res){
this.msg = res.data ;
},function(error){
this.msg = error ;
});
},
jsonp : function(){
/*跨域请求 从a 站点 请求 b 站点的东西*/
this.$http.jsonp("
https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502270020419&di=43a44ad4175aa1d69c96398d62e2380b&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170225%2Ff7a2c44a5b51402caf296c1d182c7931_th.jpeg
",{
params:{
userId:1003
},
headers : {
jsonppp:"这是jsonp数据"
}
}).then(function(res){
this.msg = res.data ;
},function(error){
this.msg = error ;
})
},
http:function(){
this.$http({
url:"package.json",
method:"GET",
params:{
userId:"104"
},
headers:{
token:"454666"
},
timeout:50,
//请求时间
before:function(){
//请求前执行的函数
console.log("http 请求前执行的函数")
}
}).then(function(res){
this.msg = res.data
},function(error){
this.msg = error ;
})
}
}
})
</script>
</body>
axios 现在vue推荐使用axios
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
同上使用npm install axios --save
</head>
<body>
<div id="app" class="container">
<h1>axios插件讲解</h1>
<!--<a href="javascript:;" class="btn btn-success" v-on:click="get">GET请求</a>-->
<a href="javascript:;" class="btn btn-success" @click="get">GET请求</a>
<a href="javascript:;" class="btn btn-success" @click = "post">POST请求</a>
<a href="javascript:;" class="btn btn-success" @click = "http">http请求</a>
<div>
<span>{{msg}}</span>
</div>
</div>
<script>
new Vue({
el:"
#app
",
data:{
msg:''
},
mounted:function(){/*请求拦截器*/
axios.interceptors.request.use(function(config){
console.log("axios 请求前");
return config ;
});
axios.interceptors.response.use(function(response){
console.log("axios 请求后");
return response ;
})
},
methods:{
get : function(){
axios.get("../package.json",{
params:{
userId:"999"
},
headers:{
token:"axios get "
}
}).then(res=>{
this.msg = res.data ;
}).catch(function(error){/*失败捕获方式*/
console.log("error axion---------"+error);
})
},
post : function(){
axios.post("../package.json",{
params:{
userId:"888"
},
headers:{
token:"axios post --------------"
}
}).then(res=>{
this.msg = res.data ;
}).catch(function(error){/*失败捕获方式*/
console.log("error axion---------"+error);
})
},
http:function(){
axios({
url:"../package.json",
method:"post",//get请求要在params中定义参数 post请求要在data
data:{
userId:"777"
},
params:{
userId:"66666"
},
headers:{
token:"http axios ------"
}
}).then(res=>{
this.msg= res.data
},error=>{
this.msg = error
})
}
}
})
</script>
</body>