1.创建项目

# 创建项目

## 使用Vue Cli创建项目

### 安装Vue Cli

#### npm

```bash
 npm i -g @vue/cli
```

#### yarn

```bash
yarn global add @vue/cli
```

### 创建项目

```bash
vue create edu-boss-fed
```

```bash
vue create edu-boss-fed
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router,
Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, autodetected
polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for
index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules
are supported by default): Sass/SCSS (with dart-sass)
 ? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on co
mmit
? Where do you prefer placing config for Babel, ESLint, etc.? In
dedicated config files
? Save this as a preset for future projects? No
```

### 启动开发服务

```bash
# 进⼊你的项⽬⽬录
cd edu-boss-fed

# 启动开发服务
npm run serve
```

## 初始⽬录结构说明

```txt
├── node_modules # 第三⽅包存储⽬录
├── public # 静态资源⽬录，任何放置在 public ⽂件夹的静态资源都会被简单的复 制，⽽不经过 webpack
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets # 公共资源⽬录，放图⽚等资源
│ ├── components # 公共组件⽬录
│ ├── router # 路由相关模块
│ ├── store # 容器相关模块
│ ├── views # 路由⻚⾯组件存储⽬录
│ ├── App.vue # 根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
│ ├── main.ts # 整个项⽬的启动⼊⼝模块
│ ├── shims-tsx.d.ts # ⽀持以 .tsc 结尾的⽂件，在 Vue 项⽬中编写 jsx 代码
│ └── shims-vue.d.ts # 让 TypeScript 识别 .vue 模块
├── .browserslistrc # 指定了项⽬的⽬标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer ⽤来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀
├── .eslintrc.js # ESLint 的配置⽂件
├── .gitignore # Git 的忽略配置⽂件，告诉 Git 项⽬中要忽略的⽂件或⽂件夹
├── README.md # 说明⽂档
├── babel.config.js # Babel 配置⽂件
├── package-lock.json # 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm install 时⼤家的依赖能保证⼀致
├── package.json # 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容
└── tsconfig.json # TypeScript 配置⽂件
```

## 调整初始目录结构

默认⽣成的⽬录结构不满⾜我们的开发需求，所以需要做⼀些⾃定义改动。

这⾥主要处理下⾯的内容：

- 删除初始化的默认⽂件
- 新增调整我们需要的⽬录结构

### 修改App.vue

```html
<template>
  <div id="app">
    
    <router-view />
  </div>
</template>
```

### 修改router/index.js

```js
import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [];

const router = new VueRouter({
  routes,
});

export default router;

```

### 删除默认示例文件

- src/views/About.vue

- src/views/Home.vue

- src/components/HelloWorld.vue

- src/assets/logo.png

### 创建以下内容

- src/services ⽬录，接⼝模块

- src/utils ⽬录，存储⼀些⼯具模块

- src/styles ⽬录，存储⼀些样式资源

### 调整后的目录结构如下

```txt
.
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── assets
│ ├── components
│ ├── router
│ ├── services
│ ├── store
│ ├── styles
│ ├── utils
│ ├── views
│ ├── App.vue
│ ├── main.ts
│ ├── shims-tsx.d.ts
│ └── shims-vue.d.ts
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
└── tsconfig.json
```

## 使用TS开发Vue项目

### 在 Vue 项目中启用 TS 支持

#### 全新项目

使用Vue CLI创建Vue项目

![](http://5coder.cn/img/1669983855_50ec4ec4f05069ff8e6624c67b2eb194.png)

#### 已有项目

添加VUe官方配置的TS适配插件

使用@vue/cli安装TS插件

```bash
vue add @vue/typescript
```

## TS相关配置介绍

### 安装了`TypeScript`相关的依赖性

#### `dependencies`依赖

| 依赖性                 | 说明                                      |
| ---------------------- | ----------------------------------------- |
| vue-class-component    | 提供使用 class 语法写 Vue 组件            |
| vue-property-decorator | 在 class 语法基础之上提供了一些辅助装饰器 |

#### `devDependencies`依赖

| 依赖性                           | 说明                                                         |
| -------------------------------- | ------------------------------------------------------------ |
| @typescript-eslint/eslint-plugin | 使用 eslint 校验 TS 代码                                     |
| @typescript-eslint/parser        | 将 TS 转换为 AST 提供 eslint 校验使用                        |
| @vue/cli-plugin-typescript       | 使用 TS+ ts-loader+fork-ts-checker-webpack-plugin 进行更快的类型检查 |
| @vue/eslint-config-typescrip     | 兼容 eslint 的 TS 校验规则                                   |
| typescript                       | TS 编辑器 ，提供类型校验 和转换 js 功能                      |

### `TypeScript`配置文件

`tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

```

#### `shims-vue.d.ts`文件的作用

主要用于 TS 识别 .vue 文件模块

TS 默认不支持导入 .vue 模块，这个文件告诉 TS 导入 .vue 文件模块都按 `VueConstructor<Vue>` 类型识别处理

```js
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
```

#### `shims-tsx.d.ts`文件的作用

为 jsx 组件模块补充类型声明

```js
import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}
```

## [TypeScript支持](https://v2.cn.vuejs.org/v2/guide/typescript.html)