Vue 및 Typescript 빌드 프로젝트

이번에는 Vue 및 Typescript 구축 프로젝트를 가져왔습니다. Vue 및 Typescript 구축 프로젝트의 주의사항은 무엇인가요?

Typescript는 프런트엔드 분야에서 점차 인기를 얻고 있습니다. Vue 2.5.0에서는 유형 선언이 개선되어 TypeScript에 더욱 친숙해졌습니다.

그러나 프로젝트에서 TypeScript를 직접 사용하려면 여전히 다음을 작성해야 합니다. 프로젝트에 대한 일부 수정

PS: 개발에는 Visual Studio Code를 사용하는 것이 좋습니다

1. 종속성 설치

먼저 vue-cli를 사용하여 프로젝트를 생성합니다

vue init webpack demo

그런 다음 필요한 종속성을 설치하십시오: typescript, ts-loader, vue-class-comComponent

npm install typescript vue-class-component -D

npm install ts-loader@3.3.1 -D

위의 ts-loader를 설치할 때 버전 3.3.1이 지정되었습니다

이 블로그를 작성할 때 때문입니다(2018- 03-14) 최신 버전의 ts-loader가 설치되었습니다. 4.0.1의 경우 프로젝트를 시작하면오류가 발생합니다

요청 시 도입할 수 있는 여러 라이브러리도 있습니다:

tslint: ts 코드를 표준화하고 tsllint-loader와 함께 사용해야 합니다. tslint-config-standard를 추가하는 것이 가장 좋습니다.

vue-property- decorator: vue-class-comComponent의 확장입니다. Vue 기능(@Emit, @Prop 등)을 결합한 여러 데코레이터를 추가합니다.

vuex -class: vue-class-composite 기반 vuex에 대한 지원을 강화합니다.

2. Webpack 구성

그런 다음 ./build/webpack.base.conf.js 파일을 수정합니다.

resolve.extension에 '.ts'를 추가하면 됩니다. ts 파일을 가져올 때 작성합니다. .ts 접미사

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

module.rules에 웹팩의 ts 파일 구문 분석을 추가합니다

3. 기타 구성

프로젝트 루트 디렉터리에 tsconfig.json 파일을 만듭니다.

// tsconfig.json{  "compilerOptions": {    // 与 Vue 的浏览器支持保持一致
    "target": "es5",    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",    "moduleResolution": "node"
  }
}

Complete tsconfig .json 구성 항목은 공식 문서를 참조하세요

./src 디렉터리에 vue-shim.d.ts 파일을 생성하고 ts가 .vue 파일을 인식하도록 합니다:

// vue-shim.d.tsdeclare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4. 파일 변환

src 디렉터리의 .vue 파일을 변경합니다. 모든 js 파일의 접미사를 .ts

로 변경한 다음 webpack 구성 파일 ./build/webpack.base.conf의 항목을 변경합니다. js를 main.ts로

변환된 ts 파일은 .vue 파일을 인식하지 못하므로 .vue 파일을 도입할 때 .vue 접미사를 수동으로 추가해야 합니다

In all .vue 파일은 <script>에 있어야 합니다. lang="ts" 로고를 </script>

에 추가하세요. TypeScript가 vue 구성 요소 옵션에서 유형을 올바르게 추론하려면 vue도 도입해야 합니다. 그리고 Vue.extend를 사용해 컴포넌트를 정의합니다

이제 기본 변환이 완료되었습니다. npm run dev를 실행하면 정상적으로 프로젝트를 시작할 수 있습니다

5. 클래스 기반 Vue 컴포넌트 변환

上面改造 .vue 文件的时候，只是简单的使用了 Vue.extend 方法，组件内部还是采用原生的 vue 写法

这在实际开发的时候并不能良好的使用 typescript 特性，所以还需要利用 vue-class-component 继续改造

首先在 tsconfig.json 中添加配置项，然后重启项目

// 允许从没有设置默认导出的模块中默认导入"allowSyntheticDefaultImports": true,// 启用装饰器"experimentalDecorators": true

 然后改造 .vue 文件的 <script> 部分，以 HelloWorld.vue 为例：</script>

// HelloWorld.vue<script>import Vue from &#39;vue&#39;import Component from &#39;vue-class-component&#39;// @Component 修饰符注明了此类为一个 Vue 组件@Component({})export default class Hello extends Vue {
  msg: String = &#39;Welcome to Your Vue.js App&#39;}</script>

组件内部不再采用 Vue 的格式，一开始也许不易接受，可以参考官方的迁移示例

<template>
  <p>
    <input>
    </p>
<p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button>Greet</button>
  
</template>
<script>   
  msg = 
  
  helloMsg =  + 
    +  + </script>

六、使用TSlint 规范代码

如果对代码格式有着严格的要求，建议引入 tslint 来规范代码，首先安装以下依赖

npm init tslint tslint-loader tslint-config-standard -D

然后在 ./build/webpack.base.conf.js 的 module.rules 中添加规则

{
  test: /\.ts$/,
  exclude: /node_modules/,
  enforce: 'pre',
  loader: 'tslint-loader'}

在项目根目录创建配置文件 tslint.json

// tslint.json{  "extends": "tslint-config-standard",  "globals": {    "require": true
  }
}

这时已经可以启动项目了，如果出现了这样的警告

只需要在 main.ts 里面，将实例化的 Vue 赋值给一个对象就好

只是这里的 tslint 校验规则是直接引入的 standard 规范，如果需要自定义

贴一篇网上找的 tslint.json 的配置项说明（来源：http://blog.csdn.net/zw52yany/article/details/78688837）

extends: 内设配置项名称
rules:  规则
  {    //ts专用
    adjacent-overload-signatures ： true,  //  Enforces function overloads to be consecutive.
    ban-comma-operator：true, //禁止逗号运算符。
    ban-type: [true, ["object","User {} instead."],["string"]] //禁止类型
    member-access： [true , "no-public"||"check-accessor"|| "check-constructor" || "check-parameter-property"  ] ,  //类成员必须声明 private public ....
    member-order: [true, {order:....}],  //类声明排序
    no-any: true,//不需使用any类型
    no-empty-interface:true //禁止空接口 {}
    no-import-side-effect: [true, {"ignore-module": "(\\.html|\\.css)$"}], //禁止导入带有副作用的语句
    no-inferrable-types：[true, "ignore-params", "ignore-properties"]， //不允许将变量或参数初始化为数字，字符串或布尔值的显式类型声明。
    no-internal-module:true， //不允许内部模块
    no-magic-numbers: [true,1,2,3], //不允许在变量赋值之外使用常量数值。当没有指定允许值列表时，默认允许-1,0和1
    no-namespace: [ true,"allpw-declarations"], //不允许使用内部modules和命名空间
    no-non-null-assertion: true , //不允许使用!后缀操作符的非空断言。
    no-parameter-reassignment: true, //不允许重新分配参数
    no-reference: true, // 禁止使用/// <reference> 导入 ，使用import代替
    no-unnecessary-type-assertion： true, //如果类型断言没有改变表达式的类型就发出警告
    no-var-requires： true, //不允许使用var module = require("module"),用 import foo = require('foo')导入
    only-arrow-functions：[true，"allow-declarations"，"allow-named-functions"], //允许箭头表达式，不需要传统表达式 ； 允许独立的函数声明  ；允许表达，function foo() {}但不是function() {}
    prefer-for-of:true,  //建议使用for(..of)
    promise-function-async: true, 要求异步函数返回promise
    typedef: [true, "call-signature", "parameter", "member-variable-declaration"], //需要定义的类型存在
    typedef-whitespace： true, //类型声明的冒号之前是否需要空格
    unified-signatures： true, //重载可以被统一联合成一个    //function 专用
    await-promise： true,  //警告不是一个promise的await    ban: [          true,          "eval",
          {"name": "$", "message": "please don't"},
          ["describe", "only"],
          {"name": ["it", "only"], "message": "don't focus tests"},
          {            "name": ["chai", "assert", "equal"],            "message": "Use 'strictEqual' instead."
          },
          {"name": ["*", "forEach"], "message": "Use a regular for loop instead."}
    ],
    curly: true, //for if do while 要有括号
    forin:true, //用for in 必须用if进行过滤
    import-blacklist:true, //允许使用import require导入具体的模块
    label-postion: true, //允许在do/for/while/swith中使用label
    no-arg:true, //不允许使用 argument.callee
    no-bitwise:true, //不允许使用按位运算符
    no-conditional-assignmen: true, //不允许在do-while/for/if/while判断语句中使用赋值语句
    no-console：true, //不能使用console
    no-construct: true, //不允许使用 String/Number/Boolean的构造函数
    no-debugger： true, //不允许使用debugger
    no-duplicate-super: true, //构造函数两次用super会发出警告
    no-empty:true, //不允许空的块
    no-eval: true, //不允许使用eval
    no-floating-promises: true, //必须正确处理promise的返回函数
    no-for-in-array: true, //不允许使用for in 遍历数组
    no-implicit-dependencies: true, //不允许在项目的package.json中导入未列为依赖项的模块
    no-inferred-empty-object-type： true， //不允许在函数和构造函数中使用{}的类型推断
    no-invalid-template-strings： true, //警告在非模板字符中使用${
    no-invalid-this：true, //不允许在非class中使用 this关键字
    no-misused-new: true, //禁止定义构造函数或new class
    no-null-keyword: true, //不允许使用null关键字
    no-object-literal-type-assertion：true, //禁止objext出现在类型断言表达式中
    no-return-await：true, //不允许return await
    arrow-parens： true, //箭头函数定义的参数需要括号
  }</reference>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React中有哪些类定义组件

ajax的学习笔记

위 내용은 Vue 및 Typescript 빌드 프로젝트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!