Vue 初始化使用笔记

23. May 2018 HTML5 0

做为一个后端开发,搞点前端也是必不可少的,最实用的就是平时写点东西展示出来,工作中调试接口,省去前后端交互的很多事,我会告诉前端接口我已经测试过了,接口问题和我无关哦。

1.vue安装使用,初始化项目绝对要使用vue-cli,不然太难搞

npm install --global vue
npm install --global vue-cli
vue init webpack my-project

接下来根据自己需求安装,可以的话,全选yes,依赖自动安装,完成后可以使用 npm run dev 查看项目,初始化介绍。

2.添加 axios

npm install axios

在main.js中添加刚安装的axios

import axios from 'axios'
import qs from 'qs'
import VueAxios from 'vue-axios'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 5000
Vue.use(VueAxios, axios)

添加请求拦截器,格式化提交数据,否则数据提交失败。

axios.interceptors.request.use((config) => {
if (config.method === 'post') {
config.data = qs.stringify(config.data);
 }
return config;
}, (error) => {
_.toast("错误的传参", 'fail');
return Promise.reject(error);
})

添加请求拦截器和响应拦截器,可做一 系列操作

axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});

3.接下来是代理,前端开发调试会遇到接口跨域问题,在config/index.js 中配置要代理的接口

dev: {
assetsSubDirectory:'static',

assetsPublicPath:'/',

proxyTable: {

'/deletefile': {

target:'http://127.0.0.1:5000',

changeOrigin:true

}}}

4.接下来添加Element-ui,对于一个后端开发者来说,这个框架很棒,很省事

npm i element-ui -S
在main.js中添加 
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, VueAxios, axios);
5.然后设置路由了,vuex了,等等
export default new Router({
routes: [{
path:'/',
name:'main',
component:Main
}]})