自定义 Vue 开发模板

• vue + vuex + vue-router
  • .vue 单文件组件支持
• typescript
  • vue, vuex, vue-router 自带声明文件，无需另外安装
  • vue-class-component
  • vue-property-decorator
• less
• 基于 webpack 的开发、编译自动化
• 基于 cdn + webpack 的发布自动化
  • 字体：本地和cdn自动转换
• 单元测试自动化
  • vue-test-utils + jest + typescript
• e2e 测试自动化
• vscode 开发配置
  • vetur 插件
  • eslint
  • prettier

注意事项

• import vue 组件时必须加上 .vue 后缀
• 要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件：

import Vue from 'vue'
const Component = Vue.extend({
  // 类型推断已启用
})

const Component = {
  // 这里不会有类型推断，
  // 因为TypeScript不能确认这是Vue组件的选项
}

• 引入第三方库需要声明文件

declare module 'vue-awesome-swiper' {
  export const swiper: any
  export const swiperSlide: any
}

declare module 'vue-lazyload'

安装依赖

# vue
npm install vue --save

# webpack 基本
npm i -D webpack webpack-cli
npm i -D webpack-dev-server
npm i -D html-webpack-plugin clean-webpack-plugin

# typescript 相关
npm i -D typescript ts-loader

# less 相关
npm i -D less style-loader css-loader less-loader

# vue 相关
npm i -D vue-loader vue-template-compiler vue-style-loader

# 生产环境相关(按需安装)
npm i -D mini-css-extract-plugin

Jest + TypeScript + vue-test-utils 的几个坑

找不到 vue 文件

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
test/HelloWorld.spec.ts:2:21 - error TS2307: Cannot find module '../src/components/Counter.vue'.
    
2 import Counter from '../src/components/Counter.vue'

解决方法：要让 ts-jest 认识 .vue 文件，需要在 tsconfig.json 中包含文件类型的声明文件

  //...
  
  "files": [
    "ts-shim.d.ts"
  ],
  
  //...

ts-shim.d.ts 声明文件至少包含以下内容：

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

Jest 不认识 import

Jest encountered an unexpected token

...

/workspace/template-vue/src/components/Counter.vue:10
export default {
^^^^^^

解决方法：jest 不能处理非纯 js 的内容，这里的 import 是 es6 特性，需要通过 babel 或 typescript 进行解析。所以应该（1）在 vue 文件中注明 script 的类型，如 <script lang="ts"> ，让 typescript 来编译；或者（2）配置 bable 处理 es6。

ts-jest 编译时警告 import

ts-jest[config] (WARN) TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

解决问题：这只是警告，编译和测试其实是可以通过的，但为了和谐，应当按照指引配置 tsconfig.json

...

"esModuleInterop": true,

...