简单的记录快速搭建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项目已经搭建完成，可以愉快开始项目开发了！