다음 js 튜토리얼 칼럼에서는 Vue+TypeScript 프로젝트 구성을 실제로 사용하는 방법을 소개하겠습니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!
Vue+TypeScript 프로젝트 구성을 통한 실전 전투
프로젝트 구성
스캐폴딩을 통한 빌드
1. Vue CLI 3
vue create vue-typescript // 在此选择typescript支持 ? Check the features needed for your project: () Babel () TypeScript ( ) Progressive Web App (PWA) Support () Router () Vuex >() CSS Pre-processors () Linter / Formatter ( ) Unit Testing ( ) E2E Testing 我是08年出道的高级前端架构师,有问题或者交流经验可以进我的扣扣裙 519293536 我都会尽力帮大家哦
// 引入 vue-class-component 插件 // 以下大概是我的选择 ? Use class-style component syntax? (Y/n) y ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass) ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) n
을 통해 vue 프로젝트 만들기 관련 권장 사항: "js 고급 튜토리얼 》
2. 프로젝트 시작하기
yarn run serve
실행 가능하다면 좋은 프로젝트입니다
3. 프로젝트 구성
이제 실제로는 스캐폴딩에서 대부분의 구성을 해 놓았는데요. 우리는 여전히 구성에 익숙해져야 합니다.
tsconfig.json
프로젝트 루트 디렉터리에 tsconfig.json을 생성합니다.
{ // 编译选项 "compilerOptions": { // 输出目录 "outDir": "./output", // 是否包含可以用于 debug 的 sourceMap "sourceMap": true, // 以严格模式解析 "strict": true, // 采用的模块系统 "module": "esnext", // 如何处理模块 "moduleResolution": "node", // 编译输出目标 ES 版本 "target": "es5", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 将每个文件作为单独的模块 "isolatedModules": false, // 启用装饰器 "experimentalDecorators": true, // 启用设计类型元数据(用于反射) "emitDecoratorMetadata": true, // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": false, // 不是函数的所有返回路径都有返回值时报错。 "noImplicitReturns": true, // 从 tslib 导入外部帮助库: 比如__extends,__rest等 "importHelpers": true, // 编译过程中打印文件名 "listFiles": true, // 移除注释 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允许编译javascript文件 "allowJs": true, // 解析非相对模块名的基准目录 "baseUrl": "./", // 指定特殊模块的路径 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 编译过程中需要引入的库文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }
tslint.json
루트 경로에 tslint.json 파일을 생성하는 것은 ts의 표준 사양을 도입하는 것입니다.
eslint 구성 파일이 도입된 경우 실제로 이 단계를 수행할 필요가 없습니다.
{ "extends": "tslint-config-standard", "globals": { "require": true } }
코드 복사
첨부된 것은 스캐폴딩 eslintrc.js에 의해 자동으로 생성된 eslint의 기본 구성입니다.
module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/essential", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier", "@vue/prettier/@typescript-eslint" ], parserOptions: { ecmaVersion: 2020 }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" } };
4. ES6/ES7 지원
tsconfig.json에서 es6/es7에 대한 지원을 추가하려면 tsconfig - 컴파일 옵션을 참조하세요.
"lib": [ "dom", "es5", "es6", "es7", "es2015.promise" ]
5. Vuex 구성
우선 당연히 종속성을 설치해야 합니다.
yarn add vuex vuex-class
코드 복사
vuex: vue
vuex-class에서 애플리케이션 상태를 중앙에서 관리합니다: vue-class-Component 작성 방법으로 vuex를 바인딩합니다.
vuex-class를 인용한 후에도 여전히 원래 작성 방법과는 조금 다릅니다.
vuex 스토어 작성 방법 및 작성 방법은 다음과 같습니다.
import { Component, Prop, Vue } from "vue-property-decorator"; import { State, Getter, Action, Mutation, namespace } from "vuex-class"; // 声明使用的是哪个模块 const commonModule = namespace("common"); @Component export default class HelloWorld extends Vue { @Prop() private msg!: string; // 获取vuex中的数据 @commonModule.State("token") token!: string; @commonModule.Getter("getToken") getToken!: string; @commonModule.Action("setToken") actionSetToken: (arg0: string) => void; @commonModule.Mutation("setToken") mutationSetToken: unknown; // @State token // @Getter("token") getterToken; // @Action("token") actionToken; // @Mutation("token") mutationToken; created() { this.actionSetToken("123"); alert(this.token); } }
6. vue mixin 기능 지원
src 아래에 새로운 mixins 디렉토리를 생성하고, 비즈니스 재사용 모듈에 따라 구조를 나눕니다.
Vue로 개발할 때 믹스인을 자주 사용하는데, TypeScript와 결합하면 일반적으로 믹스인 방법이 두 가지가 있습니다.
하나는 vue-property-designer에서 제공됩니다
// 定义 routerMixins.ts文件 // mixin router 公共方法 import Vue from 'vue' import Component from 'vue-class-component' @Component export default class myMixins extends Vue { /** * @author: WangXinYu * @describe: 浏览器后退事件 * @param: {} * @return: **/ goBack() { this.$router.go(-1) } /** * @author: WangXinYu * @describe: test * @param: {} * @return: **/ routerTest() { console.log('are you ok?') } }
// 引入 mixin import { Component, Prop, Vue, Mixins } from 'vue-property-decorator' import routerMixins from '@/mixins/router' @Component export default class HelloWorld extends Mixins(routerMixins) { created() { this.routerTest() } }
두 번째는 @Component에 혼합되어 있습니다.
// mixins.ts import { Vue, Component } from 'vue-property-decorator'; declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { value: string = 'Hello' }rrree
다들 오셨나요? 이해가 안 되시면 저를 기억해 주세요. 저는 2008년에 데뷔한 수석 프론트엔드 아키텍트입니다. 질문이나 교류 경험이 있으시면 제 버튼스커트 519293536을 입력해 주세요. 최선을 다해 여러분에게 도움이 되도록 하겠습니다
이 글의 텍스트와 사진은 인터넷을 통해 나만의 아이디어를 추가해보세요. 학습용으로만 사용되며 어떠한 상업적 목적도 없습니다. 저작권은 원저작자에게 있습니다. 궁금한 사항이 있으면 처리를 위해 제때 연락주세요.
(계속...)위 내용은 Vue+TypeScript 프로젝트 구성을 통한 실전 전투의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!