快速搭建vue项目

简单记录一下快速搭建vue项目的过程，以及一些简单的打包1.安装vue-clinpminstall-g@vue/cli2.创建项目helloworldvuecreatehello-world3.安装##进入目录cdhello-world##安装依赖npminstall4.运行查看效果npmrunserve如下：5.添加路由1.安装vue-routernpminstallvue-router--save2.新建router.js在项目根目录下添加基本的路由配置，如：constHelloWord=()=>import(/*webpackChunkName:"group-foo"*/'./components/HelloWorld.vue');constroutes=[{path:'/',component:HelloWord,meta:{keep:true}}]exportdefaultroutes;3.修改app.vue文件，添加缓存配置4.在main.js中引入路由importVueRouterfrom'vue-router';importroutesfrom'./router';Vue.use(VueRouter);letrouter=newVueRouter({routes});newVue({router,render:h=>h(App),}).$mount('#app')六包axios1.安装axiosnpm安装axios--save2。从'axios'打包http.jsimportaxios；从'../../config'导入配置letinstance=axios.create({baseURL:config[process.env.NODE_ENV].baseurl,timeout:3000})instance。interceptors.request.use(config=>{config.header.Authorization='...'returnconfig;},error=>{returnPromise.reject(error);})instance.interceptors.response.use(response=>{returnPromise.resolve(response)},err=>{//处理一些错误信息，比如letcode=err.response.status;if(code==404)err.message='Resourcenotfound';//...弹出消息...returnPromise.reject(err.response)})exportdefaultinstance;3.在main.js中引入importHttpfrom'./assets/js/http'Vue.prototype.$http=Http;至此，一个基本的vue项目已经搭建完成，可以愉快的开始项目开发了！