整体梳理

安装项目
初始的配置项目
配置axios
- 项目中使用 axios的套路
- 看接口文档，写出对应的代码
封装请求
router的使用
登录和token的使用
vuex的使用
vue的使用
- 生成打包报告
- 优化打包的体积

安装项目

安装项目，使用 vue 命令。
vue命令从哪来的？通过安装全局的包 @vue/cli 得来的

npm i @vue/cli -g
npm i @vue/cli@4.5 -g (win7系统)

安装之后，你的电脑就可以使用 vue 命令。然后才能使用 vue 命令安装项目
安装项目的命令：vue create 项目名称，具体查看vue基础自选功能安装项目的截图。
安装所需的第三方包：

终端路径，确保进入到项目文件夹。
npm i axios element-ui echarts vuex-along vue-quill-editor dayjs

初始的配置项目
清空不需要的组件、路由等等。
eslint 配置方法名和小括号之间的空格问题需要解决。
具体查看 vue大事件起步那里。
配置axios
参考网站：https://www.axios-http.cn/
项目中使用 axios的套路

看接口文档，写出对应的代码
| 接口文档的描述 | axios代码 | | —- | —- | | 请求参数、query参数、查询参数、参数
并且
url：’/api/aaa/bbb’ | request({
url: ‘/aaaaaa’,
params: { 参数: 值, 参数: 值, …… }
}) | | 参数、url参数
并且
url: ‘/api/aaa/bbb/:id/:name‘ | request({
url: ‘/api/aaa/bbb/具体的id值/具体的name值‘,
url: ‘/api/aaa/bbb/100/zhangsan‘
}) | | 请求体、body参数
并且
Content-Type: application/x-www-form-urlencoded | request({
url: ‘/api/xxx’,
data: ‘参数=值&参数=值&参数=值‘,
data: ‘username=zs&password=123456‘
}) | | 请求体、body参数
并且
Content-Type: application/json | request({
url: ‘/api/xxx’,
data: { 参数: 值, 参数: 值, …… },
data: { username: ‘zs’, password: ‘123456’ }
}) | | 请求体、body参数
并且
Content-Type: multipart/form-data | request({
url: ‘/api/xxx’,
data: FormData对象
}) |

有些接口文档不太正规，没有指定 Content-Type 那就看提交的数据有没有提交文件对象 如果有提交文件对象，必须使用 FormData 格式；没有提交文件对象，则使用字面量对象即可。

封装请求

实际的开发中，我们只负责前端
可能的情况，有接口文档有了，但是后端开发者还没有提供接口，这种情况下也可以把请求写好，就是按照上述的表格写。

router的使用

整体梳理 - 图2

登录和token的使用

项目中，非常多的提交数据这种操作。
套路：核心，就是把要提交的数据，存到数据项中，最后提交数据项。

双向绑定，你在输入框输入的时候，就可以通过数据项收集到输入的值
- 准备好数据项 user: { username: '', password: '' }
- 页面中，使用v-model 绑定即可 <el-input v-model="user.username"></el-input>
点击确定的时候，把数据项提交给接口
可选，加入表单验证

vuex的使用

直接把用户数据、token存到本地存储挺好的，为什么还要存到 vuex 中一份：

存到 vuex 中，是存到内存中，存取速度非常快
存到 vuex 中，和vue是配套的，如果有需要，则可以侦听数据的变化

使用 vuex 的基本结构：
整体梳理 - 图4
组件中使用 vuex 的语法：

使用 state
- 直接使用
  - $store.state.模块名.数据项名
- 借助辅助方法
  - import { mapState } from ‘vuex’
  - 计算属性中 …mapState(‘模块名’, [‘数据项’, ‘数据项’])
  - 使用的时候，直接使用数据项名即可，比如直接使用 token
调用 mutations 方法
- 直接使用
  - $store.commit(‘模块名/方法名’, 传递给方法的参数)
- 借助辅助方法
  - import { mapMutations } from ‘vuex’
  - 方法中 …mapMutations(‘模块名’, [‘方法名’, ‘方法名’])
  - 使用的时候，把mutations中的方法当做组件中的方法使用即可
调用 actions 方法
- 直接使用
  - $store.dispatch(‘模块名/方法名’, 传递给方法的参数)
- 借助辅助方法
  - import { mapActions } from ‘vuex’
  - 方法中 …mapActions(‘模块名’, [‘方法名’, ‘方法名’])
  - 使用的时候，把actions中的方法当做组件中的方法使用即可
使用 getters
- 直接使用
  - $store.getters[‘模块名/属性名’]
- 借助辅助方法
  - import { mapGetters } from ‘vuex’
  - 计算属性中 …mapGetters(‘模块名’, [‘计算属性’, ‘计算属性’])
  - 使用的时候，把它直接当做数据项使用即可
    vue的使用
    核心：核心，就是把要提交的数据，存到数据项中，最后提交数据项 ```javascript export default { data() { return { // 这里放数据项 addDialog: false, cateList: [], imgUrl: ‘’, addData: {}, query: {}, artList: [] } }, methods: { aaa() {

},
bbb() {},
ccc() {},

}, filters: { date_format() {} }, watch: { }, computed: { }, created() {}, mounted() {} }

<a name="NYAXM"></a>
## element-ui
看着文档去使用
<a name="HQv8O"></a>
## 最终的打包
目前，开发阶段，运行 npm run serve ，把结果打包进内存中，并没有最终的 dist 文件夹。<br />当项目做完，要 执行 npm run build 打包最终的结果（最终的结果会打包进dist文件夹）
<a name="IGMwE"></a>
### 直接打包
执行 npm run build 可以直接打包，会将结果打包进 dist 文件夹。
<a name="rhWfb"></a>
### 配置
在 vue.config.js 中，加入了两个配置：
```javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 如果打包结果，希望以File协议（双击打开），需要加如下的配置：
  publicPath: '', // 这个值 写错 空字符串，或者 './' 都可以

  // 下面的配置，作用是取消生成 xxx.map 文件
  productionSourceMap: false
})

生成打包报告

在 package.json 中，build命令后，加入 —report ，这样的话，打包之后就会生成一个 report.html 文件，这个文件就记录着打包的结果的详细信息。

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build --report",
  "lint": "vue-cli-service lint"
},

打包之后，打开 dist 文件夹里面的 report.html ，看一下那个区域的面积最大，说明这个文件的体积就最大。

优化打包的体积

加载 CDN 链接，使用其他网站的 axios、echarts、element-ui 等等。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>

加载之后，window对象中，就多了对应的 axios、echarts……….

打包的时候，配置一下，哪些第三方插件不需要被打包。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 如果打包结果，希望以File协议（双击打开），需要加如下的配置：
  publicPath: '', // 这个值 写错 空字符串，或者 './' 都可以

  // 下面的配置，作用是取消生成 xxx.map 文件
  productionSourceMap: false,

  // 配置排除哪些第三方包
  configureWebpack: {
    // 排除项
    externals: {
      // 键(第三方包名): 值(window对象中多了什么)
      echarts: 'echarts',
      axios: 'axios',
    }
  }
})

这样，打包之后，就不会把 axios、echarts打包进我们的项目了，这样我们项目的体积就变得非常小了。
完整的配置见这里。

安装项目

初始的配置项目

配置axios

项目中使用 axios的套路