快速搭建vue项目

简单的记录快速搭建vue项目的过程，以及一些简单的封装

一、 安装vue-cli

npm install -g @vue/cli

二、创建项目hello world

vue create hello-world

三、安装

## 进入目录
cd hello-world

## 安装依赖
npm install

四、运行查看效果

npm run serve

如下所示：

五、添加路由

1.安装vue-router

npm install vue-router --save

2.在项目根目录新建router.js，加入基础路由配置，如：

const HellowWord = () => import( /* webpackChunkName: "group-foo" */ './components/HelloWorld.vue');

const routes = [{
    path: '/',
    component: HellowWord,
    meta: {
        keep: true
    }
}]

export default routes;

3.修改app.vue 文件，加入缓存配置

<template>
  <div id="app">
    <keep-alive v-if="$route.meta.keep">
      <router-view></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keep"></router-view>
  </div>
</template>

4.在main.js中引入路由

import VueRouter from 'vue-router';
import routes from './router';

Vue.use(VueRouter);
let router = new VueRouter({ routes });

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

六 封装axios

1.安装axios

npm install axios --save

2.封装http.js

import axios from 'axios';
import config from '../../config'

let instance = axios.create({
    baseURL: config[process.env.NODE_ENV].baseurl,
    timeout: 3000
})


instance.interceptors.request.use(config => {
    config.header.Authorization = '...'
    return config;
}, error => {
    return Promise.reject(error);
})

instance.interceptors.response.use(response => {
    return Promise.resolve(response)
}, err => {
    // 处理一些错误信息，如    
    let code = err.response.status;
    if(code == 404) err.message = '未找到资源';
    // ... pop message ...
    return Promise.reject(err.response)
})


export default instance;

3.在main.js中引入

import Http from './assets/js/http'
Vue.prototype.$http = Http;

到此一个基础的vue项目已经搭建完成，可以愉快开始项目开发了！