共计 1418 个字符,预计需要花费 4 分钟才能阅读完成。
简单的记录快速搭建 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 项目已经搭建完成,可以愉快开始项目开发了!
正文完