vue学习-项目搭建，代码规范化设置，修改vue-cli的webpack配置，vue-router简单使用，全局注册组件，axios使用

vue的学习一直都是零零碎碎的，感觉学的东西都忘了。现在想重新学习一下。

今天是day1，加油加油！

一、项目搭建

之前的博客中已经写过如果通过‘vue create’创建一个项目，这里就不再赘述了。
这是项目文件夹结构，service主要用于axios，global用于一些全局操作，如注册组件，router发表路由。

二、代码规范

1.集成editorconfig配置

不同操作系统的程序员写同一个项目，会出现一些不同，这是为了规范化引入的。
做法：创建.editorconfig文件，写入如下内容
ps：需要安装这个插件EditorConfig for VS Code才能正常使用

代码如下（示例）：

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2.其他代码规范

• 使用prettier工具(开发时依赖，规范自己的代码），需要配置.prettierrc文件
• 使用ESLint检测，vue在创建项目的时候会自动创建.eslintrc.js文件

三.vue.config.js

自行创建的文件，用于修改vue-cli（脚手架，用于搭建项目）中webpack的配置。
vue.config.js有三种配置方式，都可改变webpack：

1.直接修改vue-cli的属性

比如publicPath：配置应用程序部署的子目录（默认是 /）；
如图所示：webpack构建之后的项目的index.html引入的资源的路径都是js/…或者是css/…，不做任何修改的话，用浏览器直接打开网页会出错。

但实际上，这些资源放置在build下的js文件夹，所以路径应该是./js/…，所以修改publicPath：’./’，这样发布之后，就是正确的。

2.修改cli中webpack的属性

配置方式二：修改webpack当中的属性，名字必须与webpack一致。

 configureWebpack: {
      resolve: {
        alias: {
          components: '@/components'
        }
      }
    }

该处使用的‘@’表示’src‘,通过path.resolve实现的

3.通过函数的形式配置

 configureWebpack: (config) => {
    config.resolve.alias = {
      '@': path.resolve(__dirname, 'src'),
      components: '@/components'
    }
  }

__dirname为绝对路径

四.vue-router

npm install vue-router@next
注意：要加@next，下载最新版本，否则有些函数没法使用

import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    // 根目录下默认重定向到登录页面
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('../views/login/login.vue')  //懒加载
  }
]

const router = createRouter({
  routes,
  history: createWebHashHistory()
})
//导出
export default router

在main.js中为项目安装router

import router from './router'
createApp(App).use(router).mount('#app')

五.全局注册组件

在global文件夹下创建index.js和register-element.js文件（名字可自定义）
index.js:通过导出register函数，被man.js调用。

import registerElement from './register-element'
export function register(app) {
  registerElement(app)
  //如果有注册别的东西，也可以封装，然后在这里调用
  //registerOther（）
}

register-element.js：真正注册组件的文件

import 'element-plus/theme-chalk/base.css'
import 'element-plus/theme-chalk/index.css'
import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
const components = [ElButton, ElForm, ElFormItem, ElInput]


export default function (app) {
  for (const component of components) {
    app.component(component.name, component)
  }
}

之后若是需要增加组件，则直接修改这个文件即可。

六.axios简单使用

1.get/post

axios
  .get('/get', {
    params: {
      name: 'susu',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })
  axios
  .post('/post', {
    data: {
      name: 'susu',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

2.axios.all

将两个axios请求的结果一起返回，则是一个数组的形式。

axios
  .all([
    axios.get('/get', {
      params: {
        name: 'why',
        age: 18
      }
    }),
    axios.post('/post', {
      data: {
        name: 'why',
        age: 18
      }
    })
  ])
  .then((res) => {
    console.log(res[0].data)
  })

//3.axios的拦截器
//fn1:请求发送成功时执行的函数
//fn2：请求发送失败时执行的函数

//请求
axios.interceptors.request.use(
  (config) => {
    console.log('请求成功的拦截')
    config.url = ''
    //想做的一些操作
    //1.给请求添加token
    //2.isLoading动画..
    return config
  },
  (err) => {
    console.log('请求发送错误')
    return err
  }
)
//响应
axios.interceptors.response.use(
  (res) => {
    console.log('响应成功的拦截')
    return res.data
  },
  (err) => {
    console.log('响应失败的拦截')
    return err
  }
)

3.根据环境设置axios的一些属性

区分不同环境，设置不同的axios请求的base_url
操作service文件夹下面的request文件夹的index.js文件

方式一：直接修改
// const BASE_URL = 'htt'
// const BASE_NAME = 'coderwhy'

// 方式二
let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://coderwhy.org/dev'
  BASE_NAME = 'coderwhy'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://coderwhy.org/prod'
  BASE_NAME = 'kobe'
} else {
  BASE_URL = 'http://coderwhy.org/test'
  BASE_NAME = 'amy'
}
export { BASE_NAME, BASE_URL }

axios.defaults.baseURL = ‘http://httpbin.org’（url当中的基地址）

---

七.参考

coderwhy老师教学视频