在Vue+Webpack中引入TypeScript

亦凉 2023-07-13 10:48 26阅读 0赞

## 使用vue-cli创建项目 ##

### 1、安装vue-cli ###

yarn global add @vue/cli //npm install --global vue-cli

### 2、创建项目 ###

> vue init webpack myProject  
> //创建前的一些配置  
> Project name: 项目名称  
> Project description： 项目描述  
> Author: 作者  
> Vue build: 如何构建项目  
> Install vue-router: 是否安装路由  
> Use ESlint to lint your code: 是否使用ESLint规范代码  
> Pick an ESLint preset:选择一个ESLint代码规范   
> Set up unit tests: 是否需要自动化单元测试  
> SetUp e2e tests with Nightwatch: 是否需要自动化用户界面测试  
> Should we run npm install for your after the project has been create?(recommend):在后续安装依赖包是否使用npm install 安装

### 3、运行项目 ###

cd 项目名称
    npm run dev  运行项目  http://localhost:8080

**项目架构介绍：**

> build 项目webpack配置文件  
> config:针对开发环境和线上环境的配置文件  
> node\_modules: 项目依赖包  
> src: 源代码目录  
> static： 静态资源  
> .babelrc: Javascript语法的编译器  
> .enditorconfig: 针对babel的编译，浏览器配置  
> .eslintignore： 针对babel的编译，eslint检测规则配置  
> .eslintrc.js: 针对babel的编译，eslint检测规则配置  
> .gitignore: git配置文件  
> .postcssrc.js： 转换成css格式的插件  
> index.html： 整个项目的入口index页，包含根实例的挂载点  
> package.json：定义了这个项目所需要的各种模块，以及项目的配置信息  
> package-lock.json： 锁定安装时的包版本号，需要上传到git上，以保证其他人在install时，大家的依赖版本相同

**src目录下文件：**

> main.js  整个项目的入口文件  
> el:\#app  //创建了一个vue实例app让其挂载在index.html的id=app的节点上  
> components: \{App\}  //注册局部组件APP，APP来源import App from './App'引入当前目录APP.vue  
> template:'<App/>  定义模块为APP组件的内容，级main中创建vue实例展示的就是APP.vue组件中的内容

**APP.vue：单文件组件**

> <template> 模板部分
> 
> <script> 逻辑部分
> 
> <style> 样式部分

## 在vue中引入typescript ##

### 1、安装ts所需要的依赖 ###

cnpm i typescripts ts-loader@^3.5.0 --save-dev

### 2、修改项目配置 ###

webpack.base.conf.js 添加rules

{
        test:/\.(tsx|ts)?$/,
        loader:'ts-loader',
        exclude:/node_modules/,
        options:{
            appendTsSuffixTo:[/\.vue$/],
        }
    }

3、添加识别（声明）文件在src目录下新建vue-shims.d.ts

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

4、在项目根目录下建立TypeScript配置文件tsconfig.json

{
        "compilerOptions":{
            "strict": true,
            "module": "es2015",
            "moduleResolution": "node",
            "target": "es5",
            "allowSyntheticDefaultImports": true,
            "declaration": false,
            "nolmplicitAny": true,
            "strictNullChecks": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "allowJs": true,
            "lib": [
                "es2017",
                "es2016",
                "dom"
            ]
        }
    }

5、重命名主入口文件src/main.js 改为main.ts，同时修改build/webpack.base.config.js中的entry中的main.js >> main.ts，并添加文件扩展.ts、.tsx

entry: {
        app: './src/main.ts'
    }
    ...其他内容
    resolve: {
        extensions: ['.js','.vue','.jason','.ts','.tsx'],
    }

6、修改src/App.vue的script标签的lang属性<script lang='ts'>

7、修改main.ts中，App组件的引入 后缀要带上.vue 因为ts只识别.ts结尾的

import App from './App.vue'

8、安装vue官方推荐插件vue-class-componentvue-property-decorator

cnpm i vue-class-component vue-property-decorator --save
    //vue-class-component:强化Vue组件，使用TypeScript/装饰器 增强Vue组件
    //vue-property-decorator:在vue-class-component上增强更多的结合Vue特性的装饰器