手把手教你快速搭建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 项目已经搭建完成，可以愉快开始项目开发了！