这一篇应该没有大的营养价值，写下来仅仅代表自己看过官网的这个模块
1、单文件组件
这个主要是告诉你，单文件组件好，单文件组件秒，单文件组件棒的呱呱叫。
单文件组件就是把一个组件放进以vue为后缀名的文件中，显然我们之前举的例子都是这样干的。这样干的好处是啥呢？我认为的有三个，第一个是组件的css作用域，这个很好理解。第二个就是语法高亮，这个意思是我们在组件中编写的代码，会根据组件、标签、属性、属性值、事件什么的改变代码的颜色，让开发者更容易区分代码。还会提示编写的错误，不至于到编译的时候才会报错。第三个就是有点整理的意思，我们把所有的组件分门别类的放在不同的文件中，更容易查找和修改。
2、单元测试
Vue提供了自己的单元测试，官网介绍了基本的断言、组件导入断言、断言异步更新。下面我们贴一下基本断言的代码。
<template> //组件
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
// 导入 Vue Test Utils 内的 `shallowMount` 和待测试的组件 //单元测试代码
import { shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'
// 挂载这个组件
const wrapper = shallowMount(MyComponent)
// 这里是一些 Jest 的测试，你也可以使用你喜欢的任何断言库或测试
describe('MyComponent', () => {
// 检查原始组件选项
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
// 评估原始组件选项中的函数的结果
it('sets the correct default data', () => {
expect(typeof MyComponent.data).toBe('function')
const defaultData = MyComponent.data()
expect(defaultData.message).toBe('hello!')
})
// 检查 mount 中的组件实例
it('correctly sets the message when created', () => {
expect(wrapper.vm.$data.message).toBe('bye!')
})
// 创建一个实例并检查渲染输出
it('renders the correct message', () => {
expect(wrapper.text()).toBe('bye!')
})
})
说实话我是不想贴这个代码的，毕竟太长了。简单说明一下：expect(typeof MyComponent.created).toBe('function')的意思是判断MyComponent组件的created生命钩子其本质是不是一个方法。
比起这个，我更好奇test-utils的导入，import后面为啥跟了一个大括号。这个是因为他想导出test-utils中的shallowMount，是不是不太明白。解释一下，export是导出模板，import是导入模板，导出模板在一个组件中可以有多个，而我们只想导入其中的 一个模板，就是在import后面加上一对儿大括号，大括号中间写上你想要导入的模板，如果想导入多个，加个逗号，在后面写上就可以了。
3、TypeScript
TypeScript是由微软开发的一门强类型语言，前后端都能用，兼容js，因为他本身就是js的超集，最后也会被编译成js。Typescript和Angular一样，都比较适用于做大项目。个人浅见，vue和js相对上一对组合来说，简单易用，但是却没有他们适合做较大一些的项目。也许vue就是因为追求简单，一开始的版本并没有兼容Typescript，现在对ts的介绍也不是很多。
简单了解了一下ts，会js的同学对于ts应该比较容易上手，但是和vue合作起来，要懂的配置的东西有点多。这里就不过多介绍了，毕竟我觉得这玩意是真用不到。假如以后用到了，再专门开一篇吧。
4、生产环境的部署
开发环境下会有许多警告，这些警告在开发环境下是很有必要的，它可以帮助开发者避免许多错误和陷阱，但是在生产环境下却没有什么用处，只会增加项目的体积。Vue 源码会根据process.env.NODE_ENV决定是否启用生产环境模式，默认情况为开发环境模式。
我们在之前就提到过两个命令，一个是npm run dev，这是是调试项目的命令，走webpack.dev.conf.js，这个js调用dev.env.js，这个js呢设置了NODE_ENV=development。另外一个命令是npm run build，这是发布项目的命令，走webpack.prod.conf.js，这个js调用prod.env.js，这个js呢设置了NODE_ENV=production。
当然，这些都是默认的，不需要我们设置的。简单了解一下，为后面配置这些东西准备准备。