Vue.js + TypeScript 脚手架套装用法

本文以一个 To-do list 项目（又是这个…）介绍如何使用 Vue.js + TypeScript + Sass + Webpack 套装。

示例项目地址

创建项目的目录结构

这里我们使用 vue-cli：

npm install -g @vue/cli
# 或者如果你更喜欢用 Yarn 的话：yarn global add @vue/cli
vue create v2do

选择手工配置特性（Manually select features）。根据你的需求选择，例如我就选择了这几个：

• Babel
• TypeScript
• CSS Pre-processors
• Linter / Formatter

按空格勾选/取消勾选，按回车确认。之后是各种配置，个人的选择：

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json
? Save this as a preset for future projects? (y/N) N

等 npm 好长时间¹，然后我们就有了一个开箱即用的目录结构及配置。

1. 这里其实也可以选择用淘宝的 npm 镜像源：vue create v2do -r https://registry.npm.taobao.org

组件

Vue.js 的一个重要概念就是「组件系统」。在我们的示例中，组件保存在 src/components 中，以 .vue 格式结尾，格式和 Vue 的单文件组件相似，类似于：

<template>
  <!-- 模板 -->
</template>

<script lang="ts">
// 组件定义。这里是 TypeScript 格式（lang="ts"）。
</script>

<style scoped lang="scss">
/* 样式定义。这里是 SCSS 格式（lang="scss"）。
   scoped 表示此格式仅应用于此组件。
*/
</style>

模板和样式定义，不多说了，和一般的 Vue.js 写法没什么不同。