7.优化工程结构

一、测试组件

1. 现象：在工程里面有很多组件需要开发，这就会导致components文件夹下的文件越来越多，并且公司中项目非常庞大，组件不断深层次嵌套子组件的情况是常态。
2. 测试方法：之前在项目中测试组件的时候，我们往往是在父组件中直接使用测试组件，然后运行项目，找到应用组件到区域观察组件效果，在复杂项目中这种测试方式麻烦、复杂且容易出现问题。
3. 改进方法：所以我们用vue提供的快速原型开发的方式在一个新的标签页中，单独运行测试组件。
4. 使用上述方式测试组件首先应该优化工程结构。

二、优化工程结构

三、运行测试文件

1. 使用vue serve指令运行测试文件

vue serve ./src/components/Icon/test.vue 

2. 测试文件到路径比较复杂，所以我们在package.json文件中添加脚本简化指令。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:Pager": "vue serve ./src/components/Pager/test.vue",
    "test:Avatar": "vue serve ./src/components/Avatar/test.vue",
    "test:Icon": "vue serve ./src/components/Icon/test.vue"
  },