【vue2.0-初始化配置】

vue2.0-初始化配置

创建项目：vue create demo

1.eslint校验关闭
例如：声明变量没有就会报错

//在根目录下创建一个vue.config.js文件
module.exports = {
    lintOnSave:false//关闭eslint
}

2.src文件夹简写方法，配置别名。@-@代表src文件

//在根目录下创建jsconfig.json文件
{
    "compilerOptions":{
        "baseUrl":"./",
        "paths":{
            "@/*":[
                "src/*"
                //@就代表src文件-只有在src文件下的文件才可以用
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

 <img alt="Vue logo" src="@/assets/logo.png">

3.清除默认样式
清楚默认样式.css：https://blog.csdn.net/weixin_47416539/article/details/123948695

<!--将清除默认样式的文件放在public文件下-->
<!--在public下的index.html文件下引入默认清除样式-->
<link rel="icon" href="./清除默认样式.css">

4.路由搭配

//文件夹-index.js + page.js
//page.js引入component 
import Home from '@/pages/Home'
export default {
    Home,
}

//index.js写入路由
import Vue from 'vue'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 //解决push/replace多次点击出现的警告
 let originPush = VueRouter.prototype.push
 let originReplace = VueRouter.prototype.replace
 VueRouter.prototype.push = function(location,resolve,reject){
     if(resolve&&reject){
     
         originPush.call(this,location,resolve,reject)
     }else{
         originPush.call(this,location,()=>{},()=>{})
     }
 }
 
VueRouter.prototype.replace = function(location,resolve,reject){
    if(resolve&&reject){
    
        originReplace.call(this,location,resolve,reject)
    }else{
        originReplace.call(this,location,()=>{},()=>{})
    }
}

//引入组件
 import pages from './page'
 export default new VueRouter({
     routes:[
         {
             path:'/home',
             component:pages.Home,
             meta:{show:true}
         },
     ]
 })
//路由创建好之后需要在main.js文件中写入
import router from '@/router'
new Vue({
    router
})

5.vuex

//在store中创建每个需要用store的模块
// 例如
	// home
		// home.js
const state={}
const mutations={}
const actions={}
const getters={}
export default {
    state,
    mutations,
    actions,
    getters
}
        
//index.js    
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import home from './home'
export default new Vuex.Store({
   modules:{
       home,
   }
})

6.配置全局兄弟事件组件

//main.js文件
new Vue({
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})
//兄弟组件1
this.$bus.$emit('事件名称')
//兄弟组件2
this.$bus.$on('事件名称'，()=>{
    //要做的事情
})

7.封装axios

//api文件夹-request.js
import axios from 'axios'

// 数据加载进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// baseURL写在create里面不生效  
//解决办法如下：
axios.defaults.baseURL = '/api'
const requests = axios.create({
    timeout:5000,
})

//请求拦截器：在发请发之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config)=>{
  nprogress.start()
  //config:配置对象，对象里面有一个属性很重要，headers请求
  return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    nprogress.done()
    return res.data
},(error)=>{
    return Promise.reject(new Error(error))
})

export default axios

8.api统一管理

//——在api文件夹下创建index.js文件
//-api统一管理  
 import requests from './request'
 //例如
 //三级联动接口
 //接口地址  请求方式  有无参数 ----注释
//——get 无参
export const reqCategoryList = ()=> requests({url:'不带api',method:'get'}))
//——post 有参
    //params至少是一个空对象
export const reqGetSearchInfo = (params)=> requests({url:'不带api',method:'post',data:params}))

//用的地方调用：
import {reqCategoryList} from '@/api'
reqCategoryList()

9.解决跨域

//vue.config.js
moudule.exports = {
    //关闭eslint
    lintOnSave:false,
    //代理路径
    devServer:{
        proxy:{
            '/api':{
                target:'地址',
                //pathRewrite:{'^/api':''}//重写地址：因为后面都是接着api所以不需要写
            }
        }
    }
}

10.防抖和节流

//在modules里面查找lodash
//使用
import {throttle} from "lodash/throttle"
import {debounce} from "lodash/debounce"
methods:{
  changeIndex:throttle(function(index){
     this.currentIndex = index
  },50)
  changeIndex:debounce(function(index){
     this.currentIndex = index
  },50)
}