使用vue-cli3+typescript的项目模板创建工程的教程

下面是使用vue-cli3+typescript的项目模板创建工程的攻略。

准备工作：
- 确保已正确安装node.js和npm
- 通过npm安装vue-cli3：npm i -g @vue/cli

步骤1：创建一个新项目
- 打开终端窗口，输入以下命令创建一个新的vue项目：

vue create my-project

• 在选择项目类型时，选择 Manually select features （手动选择功能）
• 在该操作下会出现选择功能列表，按下空格键选中 TypeScript ，并按回车键确认选择
• 若提示 Use class-style component syntax?（是否使用class-style组件语法？）请选择 Yes
• 等待vue-cli脚手架构建完成

步骤2：添加vue-cli-plugin-typescript
- 在项目目录下运行以下命令:

vue add @vue/typescript

• 这将下载并安装使用TypeScript的相关插件和配置，并自动修改配置文件以支持TypeScript。

步骤3：编写代码
- 在项目目录下找到 src 文件夹并打开。
- 在其中，您将看到一个名为 main.ts 的文件，这是应用程序的主入口文件，它使用 TypeScript 语言。
- 注意，创建 Vue 组件时，您需要在组件的 script 标记中使用 lang="ts" 属性指定 TypeScript 语言。
- 可以创建以下示例组件 HelloWorld.vue：

<template>
  <div>
    <h1>Hello world!</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  message: string = 'Hello, World!';
}
</script>

以下是在vue-cli3+typescript的项目模板中创建Vuex的示例：

步骤1：创建 store 文件夹
- 在 src 目录下创建新文件夹，命名为 store, 用于存放 vuex 相关的文件

步骤2：创建 store 文件
- 在 store 文件夹下面创建 index.ts，用于连接各个模块

步骤3：创建 vuex 模块
- 在 store 文件夹下面新建 modules 文件夹，用于存放各个 vuex 模块的文件
- 在 modules 下面创建 counter.ts，是一个示例文件：

// The Counter Module's State Interface
export interface CounterState {
    count: number;
}

// The Counter Module's Action Types
export enum CounterActionTypes {
    Increment = "INCREMENT",
    Decrement = "DECREMENT",
}

// The Counter Module's Mutation Types
export enum CounterMutationTypes {
    Increment = "INCREMENT",
    Decrement = "DECREMENT",
}

// The Counter Module's Mutations
export const mutations = {
    [CounterMutationTypes.Increment](state: CounterState) {
        state.count++;
    },
    [CounterMutationTypes.Decrement](state: CounterState) {
        state.count--;
    },
}

// The Counter Module's Actions
export const actions = {
    increment({ commit }: any) {
        commit(CounterMutationTypes.Increment);
    },
    decrement({ commit }: any) {
        commit(CounterMutationTypes.Decrement);
    },
}

步骤4：连接各个模块
- 在 store/index.ts 中，连接每个vuex模块，并导出它们

import Vue from 'vue';
import Vuex from 'vuex';

import { CounterState, mutations as counterMutations, actions as counterActions } from './modules/counter';

Vue.use(Vuex);

export interface RootState {
    counter: CounterState
}

export default new Vuex.Store({
    modules: {
        counter: {
            state: {
                count: 0
            },
            mutations: counterMutations,
            actions: counterActions,
        },
    }
})

这就是使用vue-cli3+typescript的项目模板创建工程的详细攻略，上述的示例代码仅供参考。