正文 

当前位置： 首页 > 代码 > java教程

vue3和typescript的强强联合的初次体验——摔跤放弃到重来(代码片段)

webmote webmote     2022-10-21     753

关键词：

昨天心血来潮，想感受下vue3到底有多好玩，就按照教程一步步建立项目做一个新手体验，结果悲剧了。直到现在，才终于把一个初始化项目跑起来。时间有时候就如同流水一样，潺潺东流去，一不小心，已经不见了踪影，因此，尝试新东西有风险！

  • 📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！
  • 📢本文作者：由webmote 原创，首发于 【掘金】
  • 📢作者格言： 生活在于折腾，当你不折腾生活时，生活就开始折腾你，让我们一起加油！

1. 开启VUE3的新特性

这里简单的提一下，毕竟官网介绍已经非常详细了，我这个后端都能看懂，可见写的多么的清晰了。

  • 组合式Api
  • 单文件组件

不写了，如果你从vue2转过来，几乎没什么难度吧！重点看下 vue3新特性即可。

好吧，我们开启vue3的一个新项目。

npm install vue@next
npm install -g @vue/cli

利用下列命令建立新项目

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+，需要加上额外的双短横线
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

执行npm包安装，运行 npm install ,然后执行npm serve.

很好，项目建好了。经典vue web页面打开了。

此时为止，一切都很顺利。

2. 转到TypeScript项目

自从开始转到TypeScript，悲剧发生了…

网上搜索了相关教程，便开始动手把上个项目转到TypeScript。

也开启了前端项目的极困难游戏模式，前前后后删除重装node_module不知道多少遍，一度让我怀疑人生，进入极度的自闭状态。

是的，讨厌的前端环境，估计是每个前端人员都必须走的路趟的河！ 最关键的一点，可能是趟过去后，回头一看，发现竟然根本不是这条路和那条河。

错误列举一二：

  • vue3 不识别 ts文件
  • Uncaught ReferenceError: process is not defined
  • Syntax Error: TypeError: Cannot read property ‘references’ of null
  • tsconfig.json与tslint.json警告问题
  • 在tsconfig.json中报错找不到webpack-env的类型定义文件
  • ts-loader 找不到
    …

度娘的牌子已经被我翻烂了，问题依然是层出不穷，特别是在我翻看了vue官网的教程后，我轻轻键入了vue add typescript，哎，自闭自闭，有这时间，排位赛都可以掉好几颗星了。

3、放弃/重新开始

完全放弃了从js转ts的想法和勇气，这次重新开始。

# 1. Install Vue CLI, 如果尚未安装
npm install --global @vue/cli@next

# 2. 创建一个新项目, 选择 "Manually select features" 选项
vue create my-project-name

# 3. 如果已经有一个不存在TypeScript的 Vue CLI项目，请添加适当的 Vue CLI插件：
vue add typescript

特别注意，第二点 创建一个新项目, 选择 "Manually select features" 选项。

选项见下面的模板：

按照这个方式创建，也发现了我的nodejs版本的问题，她是v12，需要升级！

利用windows的Choco进行安装升级。

choco install nodejs

一般飙到最新版本: V17。

重新创建typescript项目， 运行，一切OK，哎，问题解决后，就这么不值一提。

4. 开启多环境、api mock以及代理

增加环境文件.env.dev 和 .env.prod,编写内容，如下：

ENV = 'development'
# base api
VUE_APP_BASE_API = '/api'

修改package.json，增加环境支持。


  "name": "stream-protal",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "@types/mockjs": "^1.0.4",
    "axios": "^0.24.0",
    "core-js": "^3.8.3",
    "element-plus": "^1.2.0-beta.6",
    "mockjs": "^1.1.0",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  , 
  ...

修改vue.config.js，增加开发服务的配置和代理的配置。

const  defineConfig  = require('@vue/cli-service');

const name = 'XXX系统';
const port = '5001';
module.exports = defineConfig(
  transpileDependencies: true,
  outputDir: 'dist', // 打包的目录
  publicPath: '/',
  assetsDir: 'static',
  productionSourceMap: false,
  lintOnSave: false,
  devServer: 
    host: 'localhost',
    port: port,
    open: true,
    proxy: 
      // [process.env.VUE_APP_BASE_API]: 
      //   target: `http://localhost:9090`,
      //   changeOrigin: true,
      //   ws: false,
      //   logLevel: 'debug',
      //   // pathRewrite: 
      //   //   ['^' + process.env.VUE_APP_BASE_API]: ''
      //   // 
      // ,
      '/swagger': 
        target: `http://localhost:9090`,
        changeOrigin: true,
        logLevel: 'debug',
      ,
    ,
  ,
);

注释的那段[process.env.VUE_APP_BASE_API]: ...就是api同域代理。注释的原因是开启了mock。

在main.ts内增加开启代码：

if (process.env.NODE_ENV === 'development') 
  require('./mock/index.ts');

Mock文件的编写就比较容易了。如下：

import Mock from 'mockjs';
import  getApiUrl  from '@/api/baseUrl';
import User from './user/login';

//console.log('api', getApiUrl());
Mock.mock(`$getApiUrl()/user/login`, 'post', User.login);

export default Mock;

User.login就是mock函数，自己随便写吧。

api也做了简单风转，axios虽然已经很好用了，但毕竟每个人习惯不同，可以根据自己的习惯做些拦截器什么的。

我封装了个通用api访问的，虽然不全是restful，但也尽量让前端用起来，不用编写那么多类似的api了。

import Http from './http';

export default class api 
  resource: string;
  http: Http;
  constructor(res: string) 
    this.resource = res;
    this.http = new Http();
  

  onLoad() 

  // 获取分页列表 或全部数据列表
  getList(params: object) 
    return this.http.fetch(`/$this.resource/GetList`, 'post', params);
  

  // 新增
  add(params: object) 
    return this.http.fetch(`/$this.resource/Add`, 'post', params);
  

  //修改实体
  update(params: object) 
    return this.http.fetch(`/$this.resource/Update`, 'post', params);
  

  //批量修改
  batchUpdate(ids: any[], params: any) 
    params = params || ;
    params.ids = ids;
    return this.http.fetch(`/$this.resource/BatchUpdate`, 'post', params);
  

  // 删除指定id的数据
  delete(id: any) 
    const sid = encodeURIComponent(id);
    return this.http.fetch(`/$this.resource/$sid`, 'delete');
  
  //批量删除
  batchDelete(ids: any[]) 
    const strIds = ids.join(',');
    const sid = encodeURIComponent(strIds);
    return this.http.fetch(`/$this.resource/$sid`, 'delete');
  
  //获取
  get(id: any) 
    return this.http.fetch(`/$this.resource/$id`, 'get');
  

  //获取子实体列表
  getDetail(id: any) 
    return this.http.fetch(`/$this.resource/Detail/$id`, 'get');
  

  //子实体批量更新，没有的创建，有的修改，提交没有库内有的删除
  updateDetail(id: any, params: object) 
    return this.http.fetch(`/$this.resource/Detail/$id`, 'post', params);
  

  //获取子实体列表
  login(params: any) 
    return this.http.fetch(`/$this.resource/login`, 'post', params);

oo,最后，没有放在github上，抱歉了，今天没时间了，屁股疼！

5. 小结

弯路走太多，已经不记得怎么走直路了，吐完了血，周末也过完了，@尤雨溪 估计不会有啥好话的，哎，谁叫我是新手的？

👓都看到这了，还在乎点个赞吗？

👓都点赞了，还在乎一个收藏吗？

👓都收藏了，还在乎一个评论吗？

vue3和typescript的强强联合的初次体验——摔跤放弃到重来(代码片段)

昨天心血来潮，想感受下vue3到底有多好玩，就按照教程一步步建立项目做一个新手体验，结果悲剧了。直到现在，才终于把一个初始化项目跑起来。时间有时候就如同流水一样，潺潺东流去，一不小心ÿ... 查看详情

vue3和typescript的强强联合的初次体验——摔跤放弃到重来(代码片段)

昨天心血来潮，想感受下vue3到底有多好玩，就按照教程一步步建立项目做一个新手体验，结果悲剧了。直到现在，才终于把一个初始化项目跑起来。时间有时候就如同流水一样，潺潺东流去，一不小心ÿ... 查看详情

在vue3中使用typescript和jsx

本文将介绍如何在Vue3中使用tsx首先回答两个问题：WhyVue3在Vue2中，组件相关的逻辑都被写在一个文件中，经常会出现一个组件几千行代码，非常难以维护；而且一个功能的相关代码通常会分散写在datamethodscreated等各个选项中，想... 查看详情

vite2+vue3+typescript：搭建企业级轻量框架实践

...插件，以及让他们组合到整个工程中去。另外，Vue3支持Typescript语法编程也是其中一大亮点，为了探索新技术的工程化搭建，本文会把Typescript、vite、pinia等官方周边整合到工程里面。接下来，**为了让大家更好理解本项目工程化... 查看详情

linux初次体验(代码片段)

1、Linux概述1.1、Linux简介Linux内核最初只是由芬兰人林纳斯·托瓦兹（LinusTorvalds）在赫尔辛基大学上学时出于个人爱好而编写的。Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX（可移植操作系统接口）和UNIX的... 查看详情

Typescript - 联合类型和泛型类型引发不兼容错误

】Typescript-联合类型和泛型类型引发不兼容错误【英文标题】：Typescript-UnionTypeandgenerictypesthrowincompatibilityerror【发布时间】：2020-12-1616:04:35【问题描述】：我对使用联合类型的泛型类型有疑问。在我的例子中，一个函数是使用联... 查看详情

TypeScript 中的函数重载与使用联合类型

】TypeScript中的函数重载与使用联合类型【英文标题】：FunctionOverloadinginTypeScriptvsUsingaUnionType【发布时间】：2021-02-2018:11:41【问题描述】：我正在阅读有关函数重载的信息。本质上它们是什么，假设您正在创建3个具有相同名称的... 查看详情

初次体验

首次接触RedhatLinux，什么是运维？什么是Linux？这些看似晦涩难懂的词汇现在有了初步的了解。对我而言本身对计算机的种种内容都很有兴趣，之前自己的电脑也会自己装系统，发现不懂的问题就去百度查找解决办法，然后自己... 查看详情

如何使用 Vue3 和 Typescript 在 Quasar Framework 中定义 ref 方法的类型

】如何使用Vue3和Typescript在QuasarFramework中定义ref方法的类型【英文标题】：HowdefinetypeofrefmethodinQuasarFrameworkwithVue3andTypescript【发布时间】：2021-10-1108:17:21【问题描述】：QuasarFrameworkv2测试版Vue3组合API打字稿组件模板<q-btn@click.stop... 查看详情

使用vue3+typescript开发小程序

参考技术A要求是使用vue3+typescript进行开发小程序和H5的跨端应用在uniapp和taro这两个之中进行选择在参了官方和社区示例后最终选择了taro。原因在于uniapp目前对于vue3的支持尚不完全比如说暂不支持setup语法糖对于h5的支持比较差... 查看详情

基于vue3和typescript项目大量实践后的思考

↓推荐关注↓概述Vue3出来已经有一段时间了，在团队中，也进行了大量的业务实践，也有了一些自己的思考。总的来说，Vue3无论是在底层的原理上，还是在业务的实际开发中，都有了长足的进步。使用prox... 查看详情

vue3+typescript开发实践总结(代码片段)

...今年3月份时就把Vue3过了一遍。<br/>在去年年末又把TypeScript重新学了一遍，为了上Vue3的车，更好的开车。<br/>在上家公司4月份时，上级领导分配了一个内部的党务系统开发，这个系统前端是由我一个人来开发，功能和需... 查看详情

带有 Typescript 的 Vue3 路由器：缺少 RouteConfig

】带有Typescript的Vue3路由器：缺少RouteConfig【英文标题】：Vue3RouterwithTypescript:missingRouteConfig【发布时间】：2020-10-0719:20:37【问题描述】：我从@vue/cli$&gt;vuecreatemy-project创建了一个新的vue项目，激活了Typescript选项和路由器选项，... 查看详情

2020年前端最火的技术是啥？

...知识点。1，前端框架和语言层面9月份Vue3.0发布，声称对TypeScript有着更好的开发体验，通过从不同框架级别TS支持上，我们可以看出社区的整个风向从2019年的大家都去学习应用TS，变成了大家如何把TS用的更好这个方向上来了。... 查看详情

使用 vue3 和 typescript 访问动态模板引用

】使用vue3和typescript访问动态模板引用【英文标题】：Accessingdynamictemplaterefswithvue3andtypescript【发布时间】：2021-12-1723:33:45【问题描述】：我有一个像这样动态渲染组件的组件：<divclass="row"v-for="(formField,index)inform.formFields":key="ind... 查看详情

2020年前端最火的技术是啥？

...知识点。1，前端框架和语言层面9月份Vue3.0发布，声称对TypeScript有着更好的开发体验，通过从不同框架级别TS支持上，我们可以看出社区的整个风向从2019年的大家都去学习应用TS，变成了大家如何把TS用的更好这个方向上来了。... 查看详情

基于vue3和typescript项目大量实践后的思考

...聚焦，它讲究的是相关业务的聚合性。完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势--前端的未来就是TypeScript！compositonApi的本质，体现在代码里面，也就是一个setup... 查看详情

白话typescript中的extends和infer(含vue3的unwrapref)(代码片段)

...步。分享不易，希望能够得到大家的支持和关注。extendstypescript2.8引入了条件类型关键字:extends，长这个样子:TextendsU?X:Y看起来是不是有点像三元运算符:condition?result(1):result(2)，用大白话可以表示为:如果T 查看详情