vue2.6+ Typescrip

新建vue2.6项目

1. 确保您已经安装了 Node.js 和 npm。
2. 打开命令行终端，并进入您想要创建项目的目录。
3. 运行以下命令，使用 Vue CLI 2.x 创建一个新的 Vue 2.6 项目：

npm install -g vue-cli
vue init webpack my-project

运行第一条命令是为了全局安装 Vue CLI 2.x，这是一个命令行工具，可以帮助您创建和管理 Vue 2.x 项目。
运行第二条命令会提示您输入一些项目配置信息(可见 Vue CLI)，例如项目名称、作者、描述等等。您可以根据需要进行配置。

安装vue2.6过程中的配置选项都有什么

Vue 2.x：选择 Vue 的版本，可以选择 2.x 或 3.x 版本。

Babel：选择是否使用 Babel 来转译代码，以支持更广泛的浏览器环境。

TypeScript：选择是否使用 TypeScript 来开发项目。

CSS Pre-processors：选择要使用的 CSS 预处理器，例如 Sass、Less、Stylus 等。

Linter / Formatter：选择要使用的代码风格检查和格式化工具，例如 ESLint、Prettier 等。

Unit Testing：选择是否在项目中使用单元测试工具，例如 Jest、Mocha 等。

E2E Testing：选择是否在项目中使用端到端测试工具，例如 Cypress、Nightwatch 等。

Config Files：选择是否使用配置文件，例如 Babel 配置文件、ESLint 配置文件等。

Features：选择一些常用的功能，例如 Router、Vuex、CSS Pre-processors 等

Vue CLI 的模板都有什么

webpack-simple：简单的 Webpack 模板，适用于小型项目或初学者。
webpack：完整的 Webpack 模板，适用于大型项目或需要更多高级配置的项目。
browserify：Browserify 模板，用于使用 Browserify 的项目。
simple：最简单的模板，只包含一个 HTML 文件和一个 Vue 组件。
pwa：用于创建渐进式 Web 应用程序（Progressive Web App）的模板。

如果安装完成后发现是vue2.5，但是想升级到vue2.6版本，执行命令：

npm install vue@2.6 --save
或者
yarn upgrade vue@2.6

4. 完成项目配置后，进入项目目录并安装项目依赖：

cd my-project
npm install

5. 运行以下命令，启动开发服务器：

npm run dev

运行上述命令后，您可以在浏览器中访问 http://localhost:8080 来查看您的应用程序。

请注意，上述命令中的 my-project 是您的项目名称，您可以将其替换为您想要的任何名称。在创建项目时，您还可以选择其他 Vue 2.x 项目模板，例如使用 Browserify 或 Simple 的模板。

在vue2.6项目中配置typescrip

1. 确保您的项目中已经安装了 Vue.js 2.6 和 TypeScript：

npm install vue@2.6 typescript --save-dev
或者
yarn add vue@2.6 typescript --dev

2. 创建 tsconfig.json 文件，该文件是 TypeScript 编译器的配置文件。您可以使用以下命令来创建该文件：

npx tsc --init

3. 运行该命令后，将在项目根目录中创建一个 tsconfig.json 文件。您可以根据需要修改该文件中的配置项，例如 target、module 等等。

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

4. 修改 webpack.config.js 或 vue.config.js 文件中的配置，以支持 TypeScript：

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      // ...
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: { appendTsSuffixTo: [/\.vue$/] }
      }
    ]
  },
  // ...
}

或者

// vue.config.js
module.exports = {
  // ...
  chainWebpack: config => {
    config.resolve.extensions
      .add('.ts')
      .add('.tsx')
    config.module
      .rule('ts')
      .test(/\.tsx?$/)
      .use('ts-loader')
      .loader('ts-loader')
      .end()
  }
}

根据您的项目配置和需求，可以选择其中的一个进行配置。

5. 如果您的项目中使用了第三方库，且这些库没有提供 TypeScript 类型定义文件，您需要手动添加类型定义文件或者创建自己的类型定义文件。您可以使用 @types 或者 typings 等库来添加类型定义文件。