创建vue-webpack项目的一些使用配置

1.创建webpack 项目
vue init webpack myvuedemo3
2.安装路由模块，element-ui模块，axios 模块
安装 vue-router
npm install vue-router --save-dev
安装 element-ui
npm i element-ui -s
安装 axios
npm install --save axios vue-axios
安装完以后，记得安装依赖 npm install

3.配置路由
创建路由表
1.在src下创建router 文件夹，里面创建index.js,，此时该文件就是一个路由表
import Vue from ‘vue’
import Router from ‘vue-router’
import Login from ‘…/views/Login’

//安装路由
Vue.use(Router);
export default new Router({
routes:[{
//路由路径
path:’/Login’,
//路由名称
name:Login,
//跳转到组件
component:Login,
}]
});
2.在main.js 中注册配置该路由表
import Vue from ‘vue’
import App from ‘./App’
import VueRouter from ‘vue-router’ // 全局使用路由模块
//导入上面创建的路由配置路由表
import router from ‘./router’
Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.use(VueRouter);
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})
3.在App.vue中创建路由视图

//创建路由视图

4.在项目中使用element-ui模块

5.在发送axios 时，如何调用vue对象中的内容
//因为axios 内部的then内的this 是当前axios对象，而不是当前vue对象，因此把当前的vue对象用vm来指明，这样this不会冲突
created() {
// 因为axios 内部的then内的this 是当前axios对象，而不是当前vue对象，因此把当前的vue对象用vm来指明，这样this不会冲突
let vm =this;
this.axios({
method:‘get’,
url:‘http://www.baidu.com’

}).then(function (resp) {

});

},

5.关于路由的重定向
直接调用另一个已配置好的路由对象即可
routes:[{
//路由路径
path:’/Login’,
//路由名称
name:‘Login’,
//跳转到组件
component:Login,
},
{
path:’/Logout’,
redirect:’/Login’
},

路由传递参数 方式一
设置参数:首先在路由表配置信息如下: 第一步
{
path:’/Productinfo/:id’,
name:‘Productinfo’,
component:Productinfo
}

传参: 第二步
商品信息

接参: 第三步

商品信息 {{this.$route.params.id}}

方式二: 设置参数:首先在路由表配置信息如下: 第一步 { path:'/Productinfo/:id', name:'Productinfo', component:Productinfo } 传参: 商品信息

接参:

商品信息
{{this.$route.params.id}}