vue中使用ts配置的具体步骤

目录
  • vue老项目引入TypeScripe
  • 从零开始创建vue+TypeScripe项目
  • vue3加ts的配置与基本语法格式
    • 下面是我写的一个小demo

通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(TypeScripe)进行编写的,因此我感觉未来的中大型项目的发展趋势也离不开ts。

因此我根据一些入门教程利用vue结合ts编写了文档,适合入门配置vue+ts项目。

vue老项目引入TypeScripe

npm install vue-class-component vue-property-decorator --save
npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
  • vue-class-component:扩展vue支持typescript,将原有的vue语法通过声明的方式来支持ts
  • vue-property-decorator:基于vue-class-component扩展更多装饰器
  • ts-loader:让webpack能够识别ts文件
  • tslint-loader:tslint用来约束文件编码,可装可不装,建议最好安装下,有利于代码规范
  • tslint-config-standard: tslint 配置 standard风格的约束,这个也是用来规范ts代码风格的

注:这种方式安装ts是为了将原有的vue项目中Js语法修改为Ts,详细步骤参考https://www.jb51.net/article/230703.htm此文中对于vue.config.js或者低版本的webpack.base.conf中配置支持ts语法展示不太完全,因此我修改如下:

// 对于文件插件配置,需要写在configureWebpack这个对象中。
module.exports = {
    configureWebpack: {
        resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
        module: {
            rules: [
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                },
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options: {
                        appendTsSuffixTo: [/\.vue$/],
                    }
                }
            ]
        }
    }
}

从零开始创建vue+TypeScripe项目

这种方式比较简单,只要在用命令vue create app-name创建项目时选择自定义就可以创建,如下步骤:

第二步选中上面几种就行,在终端中利用空格键进行选中,选中之后回车,选择项含义如下:

 (*) Babel   //ES6转ES5
 (*) TypeScript   //使用ts
 ( ) Progressive Web App (PWA) Support   //渐进式Web应用
 (*) Router  //路由
 (*) Vuex  //状态管理
 (*) CSS Pre-processors  //CSS预处理
 (*) Linter / Formatter   //规范类型
 ( ) Unit Testing  //测试
 ( ) E2E Testing  //测试

下一步的配置细节如下:

Use class-style component syntax? (Y/n)   是否使用class风格的组件语法   输入Y回车
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, trans
piling JSX)? (Y/n)   是否使用Babel和TypeScript(现代模式、自动检测多边形填充、trans所需(JSX) 输入Y回车
Use history mode for router? (Requires proper server setup for index fallback in product
ion) (Y/n)    是否使用history路由模式  输入N回车
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  选择预处理器模式 我常选择Sass/SCSS (with node-sass)
Pick a linter / formatter config: (Use arrow keys):选择语法检测规范  一般默认第一个ESLint with error prevention only, 但是使用ts可以选择TSLint
Pick additional lint features: (Press to select, to toggle all, to invert selection)   选择保存时检查 / 提交时检查  一般开发时选择第一个保存时检查
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)   选择配置信息存放位置,单独存放或者并入package.json  一般也是默认选择第一个,插件配置单独存放在一个文件
Save this as a preset for future projects? (y/N)   是否保存为预设,这样下次创建项目就不用重新选择  输入N回车

以上选项完成后项目就搭建成功了,项目目录如下:

vue.config.js这个文件需要自己创建,放在项目根目录下即可

vue3加ts的配置与基本语法格式

  • class-style 是vue中使用了ts的class-style的风格,也可以不加
  • Babel alongside TypeScript是使用Babel做转义, 与TypeScript一起用于自动检测
  • history是路由是否为哈希模式,这里选否,哈希模式路径要加#

现在是选择代码风格检查和格式化的配置

  • ESLint with error prevention only 指仅用于错误预防
  • ESLint + Airbnb config 指ESLint 和Airbnb代码规范
  • ESLint + Standard config 指ESLint 和Standard代码规范
  • ESLint + Prettier 指ESLint 和Prettier代码规范

这里先选默认ESLint with error prevention only

1是严格模式,代码格式不规范也会报错

2是除了语法错误外不会提示

询问项目的配置文件存放在哪儿(1是独立文件,2是在package.json)这里选择独立的文件,选择2在后续配置postcs适配时存在问题。

这一步是, 是否保存,选是的话会记住这次的配置

接下来 npm run serve 启动项目就ok了

下面是我写的一个小demo

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue中使用typescript配置步骤

    目录 1.vue老项目引入TypeScripe 从零开始创建vue+typescript项目 通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(typescript)进行编写的,因此我感觉未来的中大型项目的发展趋势也离不开ts.因此我根据一些入门教程利用vue结合ts编写了文档,适合入门配置vue+ts项目. 1.vue老项目引入TypeScripe npm install vue-class-component vue-property-decorat

  • 如何在vue中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • vue项目中使用ts(typescript)入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • vue3中如何使用ts

    目录 如何使用ts app.vue header.vue list.vue listitem.vue footer.vue 如何使用ts 在创建vue脚手架的时候吧typescript选上 app.vue <template>   <!-- <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to=&quo

  • vue中使用ts配置的具体步骤

    目录 vue老项目引入TypeScripe 从零开始创建vue+TypeScripe项目 vue3加ts的配置与基本语法格式 下面是我写的一个小demo 通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(TypeScripe)进行编写的,因此我感觉未来的中大型项目的发展趋势也离不开ts. 因此我根据一些入门教程利用vue结合ts编写了文档,适合入门配置vue+ts项目. vue老项目引入TypeScripe npm install vue-class-c

  • 详解axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二.引入方式: npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bowe

  • Vue中的Vux配置指南

    简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状

  • 简述vue中的config配置

    在webpack.base.conf文件中配置别名以及扩展名 resolve: { extensions: ['.js', '.vue', '.json', '.styl'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'src': path.resolve(__dirname, '../src'), 'common': path.resolve(__dirname, '../src/common'), 'compo

  • vue中接口域名配置为全局变量的实现方法

    src中新建 一个 domain.js文件 // 配置全局接口域名 const domain = 'http://bowensi.xiaoniren.cn/'; export default { testUrl:domain } main.js中 import domain from './domain.js'; global.domain = domain; 组件中: data () { return { imgsrc:domain.testUrl}} 以上这篇vue中接口域名配置为全局变量的

  • 解决vue中使用proxy配置不同端口和ip接口问题

    问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

  • Vue中使用vux配置代码详解

    一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装

  • vue中rem的配置的方法示例

    在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 开发移动端,我们常常要用到rem+flex,那么vue中如何配置呢,我的做法是这样: 1.在js中统一计算配置 代码如下: export default function() { // var devicePixelRatio = 1; // var scale = 1 / devicePixelRatio; // document.querySelector('meta[name="view

随机推荐