TypeScript + Vue 开发多页面应用 TypescriptAndVue

谁借莪１个温暖的怀抱￠ 2022-05-18 06:09 189阅读 0赞

TypescriptAndVue 详细介绍

这种开发方式很非主流，但我确实有这种需求。Vue 适合用来开发 SPA 单页应用，所以连官方文档和网络上的各种资料、问答也都是适合用于单页应用的项目配置。

我也是最近因为种种原因才开始接触 Vue，发现对于网页中需要有大量数据变动和组件联动情况下，Vue 还是比较方便的。所以打算用 TypeScript 和 Vue 集成到以前使用 layui 的后台中去，开发一些新的比较复杂的页面。

这一套配置，我花了4天研究出来，也算是弥补这一领域的空缺吧。前端高手勿喷，我只是一个更倾向于后端的开发者，多页面应用目前确实还有很多应用，否则 layui 也不会这么受欢迎了！

### 项目组成 ###

**IDE:** VSCode

**开发语言:** TypeScript

**用到的 JS 库:**

jQuery、RequireJS、Vue (可选)、其它（如 layui 你都可以自己集成进来）

**编译工具:** gulp

**TS 代码提示:** typings

### 实现功能 ###

*  代码提示
 *  无报错
 *  支持传统多页面入口开发模式

### 为何要使用这些工具来组成项目 ###

首先说明为何不使用 Webpack，如上面所说，Webpack 更适合用于单入口的单页应用。传统多页面开发模式，也不是不能用 Webpack，你加一个页面就要加一项配置，非常麻烦的。

**TypeScript**

TypeScript 是微软开发的一个编程语言，它是 JavaScript 的超集。你可以使用 class 等关键词进行开发，然后 TypeScript 会帮你把代码编译成 JavaScript 代码，并且最终是可以在不支持 ES6 的浏览器中运行的！

对，我就是因为 TypeScript 写类比 JavaScript 好看好理解，才用的！

**Vue**

如上面所说，其实这个项目你可以自己选择是否使用 Vue。

**RequireJS**

RequireJS 是可以让你避免手动在页面中写 <script> 标签的一个库，同时也是解决 TypeScript 中的 import 编译成 JavaScript 后是 require 的问题&hellip;&hellip;

**VSCode**

我喜欢~

**gulp**

为了实现非主流的 Vue 组件开发。在这个项目中，我把 Vue 组件开发分为了模版 (template.html) 和逻辑代码 (.ts) 两个文件。

光光依靠 VSCode 本身的 tsc 编译，无法实现将 template.html 文件从 ts 目录中复制到 js 目录中去。

### 使用方法 ###

1.  首先你得有 NodeJS 和 TypeScript 环境，这就不说了，自己百度，简单。
2.  在项目目录下执行 npm install，用于安装 typings、gulp 等
3.  在项目目录下执行 typings install，用于安装代码提示所需文件
4.  在 VSCode 中按 Ctrl + Shift + B 运行生成任务。一旦你修改了 .ts 文件，会自动编译到 js 目录中。

### 配置修改 ###

根据实际项目情况，你肯定不会用我这个 demo 的目录结构，所以你需要改目录。

两个文件：tsconfig.json 和 gulpfile.js

./js 和 ./ts 分别是生成目标路径和原始代码路径，改了就好。

发表评论取消回复

表情：

评论列表（有 0 条评论，189人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3-ts-vite：vue 项目配置多页面应用

一、Vue项目，什么是多页面应用 Vue是一种单页面应用程序（SPA）框架，这意味着Vue应用程序通常只有一个HTML页面，而在该页面上进行动态的内容更改，而不是每次都加

喜欢ヅ旅行/ 2024年03月23日 19:30/ 0 赞/ 90 阅读

相关 vue搭建多页面开发环境

自从习惯开发了单页面应用，对多页面的页面间的相互跳转间没有过渡效果、难维护极度反感。但是最近公司技术老大说，当一个应用越来越大的时候单页面模式应付不来，但是没讲怎么应付不来，所

た入场券/ 2023年10月11日 14:29/ 0 赞/ 62 阅读

相关 vue多页面与单页面开发的区别。

进入一家新的公司，要开发移动端app项目，前端技术选型时前端组长选的是vue的多页面开发，当时很蒙，vue不是单页面开发吗？咋出来多页面的。接触之后才发现确实存在也挺简单的，省

电玩女神/ 2023年10月11日 14:25/ 0 赞/ 76 阅读

相关 pixi小游戏开发(vue+typescript)

一直以来都觉得typescript是以后前端发展的趋势，一些大厂的前端项目都已经在用ts来替代js了。正好最近刚开始准备用pixi写个小游戏，因为刚开工没多久，于是今天就将

冷不防/ 2023年08月17日 15:42/ 0 赞/ 45 阅读

相关 Vue中应用TypeScript

Vue-cli4 + TypeScript3.0开发项目 1、安装vue-cli4 npm install -g @vue/cli 安装完成之后可以通过vue

川长思鸟来/ 2023年06月28日 09:56/ 0 赞/ 35 阅读

相关 vue 配置多页面应用

前言: 本文基于`vue 2.5.2`, `webpack 3.6.0`（配置多页面原理类似，实现方法各有千秋，可根据需要进行定制化） `vue` 是单页面应用。但是在做大型

Myth丶恋晨/ 2023年06月20日 06:41/ 0 赞/ 46 阅读

相关 vue多页面应用的动态配置

vue结合webpack构建多页面应用时，若一个个页面配置显然过于繁琐。这里我们以示例介绍下多页面应用如何实现动态配置。一：src目录下建pages文件夹，将所有页面放在

向右看齐/ 2023年03月13日 06:43/ 0 赞/ 301 阅读

相关 TypeScript + Vue 开发多页面应用 TypescriptAndVue

TypescriptAndVue 详细介绍这种开发方式很非主流，但我确实有这种需求。Vue 适合用来开发 SPA 单页应用，所以连官方文档和网络上的各种资料、问答也都是适合

谁借莪１个温暖的怀抱￠/ 2022年05月18日 06:09/ 0 赞/ 190 阅读

相关 vue开发多页面应用修改配置详解

相关配置webpack 1.14.0 、node v6.11.0、npm 5.6.0, 代码目录结构由vue-cli生成，如下：保留脚手架原有文件，src下新建pages文件

心已赠人/ 2022年04月16日 04:13/ 0 赞/ 421 阅读

相关如何使用 vue + typescript 编写页面（typescript简单语法篇）

在使用typescript编写项目之前，需要有一定的js【es6】基础知识。在学习ts的过程中，类比js的差异，做到基本结合。开发中除去js报错的部分，大部分会受到ts的语义

小灰灰/ 2022年03月16日 14:18/ 0 赞/ 407 阅读