SPA开发第一天（vue-cli）

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({

//mode:'history',//访问页面使用hash 为history时浏览器http://localhost:8080/#/ 会加“#”

为hash时浏览器http://localhost:8080/ 不会家“#”

routes: [

{

path: '/goods', 这里可以配置动态路由 path: '/goods/:goodId'

配置界面获取参数方式{{$route.params.goodId}}

浏览器请求是http://localhost:8080/#/goods/342342

也可能是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>

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>

<title>Title</title>

项目文件夹下 npm install vue-resource --save 成功引用后再package.json文件中可以看到

</head>

<body>

<h1>vue-resource 插件讲解</h1>

<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>

</div>

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>

<title>Title</title>

</head>

<body>

<h1>axios插件讲解</h1>

<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>

</div>

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 ------"

标签

vue

vue-cli

vue-resource

http请求