1.建立项目
1.1初始化项目
会自动建立项目文件
其中webpack-simple是模板,另外一个常用的是webpack
vue init webpack-simple demo
1.2安装package.json里面的所有依赖模块
cnpm install
1.3项目下,命令行输入
npm run dev
可以看到demo页面
2.模块安装和使用
2.1vue-router模块化
-S表示 生产环境的需要,--save 写入dependencies
-D 开发需要 --save-d 写入devDependencies
cnpm install vue-router -S
①编辑main.js首先引入vue-router
import引入module里面的内容,直接加在引号里
加载组件,要使用'./目录'
import VueRouter from 'vue-router'
②使用vue-router的全局方法
Vue.use(VueRouter)
③在src目录下建立components文件,里面建立组件Home和News组件,只需要写template部分进行展示
④在src目录下建立配路由router.config.js
import Home from './components/Home.vue'
import News from './components/News.vue'
export default{
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
}
]
}
⑤编辑App.vue
这部分是用来展示看见的内容
<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<h3>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</h3>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
⑥继续编辑main.js路由注册
import routerConfig from './router.config.js'
import Vue from 'vue'
import VueRouter from 'vue-router' /*后面的名字固定*/
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'
/*使用vue-router,要使用vue-router全局方法*/
Vue.use(VueRouter);
/*axios好的办法应该是全局引入后,使用Vue.use('axios'),然后在每个组件中都可以使用*/
Vue.prototype.$http=axios; /*习惯叫$http*/
//创建路由实例
const router=new VueRouter(routerConfig);
new Vue({
el: '#app',
render: h => h(App),
/*注入路由*/
router
});
⑦npm run dev可以看到效果
⑧获取路由参数$route更进一步,可以查看vue路由变化的值,可以在实例挂载的时候输出this.$route 也可以侦听这个值的变化
mounted(){
console.log(this.$route)
},
watch:{
$route:function (newValue,oldValue) {
console.log("新的路由是:"+oldValue.path)
}
}
2.2axios的模块化
①安装
cnpm install axios -S
axios不是一个成熟的插件,不能使用Vue.use来使用
②使用的两种方式
方式1:在每个组件中引入axios,每个组件都要引用
引用的位置是组件里的scripts部分的开头
import axios from 'axios'
然后就是普通的,在模板template里面,用按钮点击事件
<button @click="send">click</button>
methods:{
send:function () {
axios.get('https://api.github.com/users/tangyang8942')
.then(resp=>{
console.log(resp.data);
}).catch(err=>{
console.log(err);
});
}
}
方式2:全局引入axios,在main.js,在使用Vue的全局方法添加axios,其实就是在vue的原型上加一个方法
不能使用Vue.use使用全局,这是axios需要改进的地方
首先全局引入
然后在Vue的原型上添加方法,等于是加个一个全局的方法
Vue.prototype.axios=Axios;
所以使用的时候要用this.axios
methods:{
send:function () {
this.axios.get('https://api.github.com/users/tangyang8942')
.then(resp=>{
console.log(resp.data);
}).catch(err=>{
console.log(err);
});
}
}
一般都会写成Vue.prototype.$http=axios;
使用的时候就是this.$http
2.3为自定义组件添加事件
①自定义一个button组件,myButton
②在需要的组件中的script里面导入,比如App.vue
③在的components里面注册,即在App.vue 下的scripts部分
④然后在<template>里面展示
即会把组件展示出来
⑤绑定方法的时候,一把思路是是直接绑定方法@click='send',但经过测试并不能用,默认绑定不了
方法:加个修饰符.native @click.native='send'