当前位置: 首页 > 软件库 > Web应用开发 > >

TypescriptAndVue

TypeScript + Vue 开发多页面应用
授权协议 未知
开发语言 TypeScript
所属分类 Web应用开发
软件类型 开源软件
地区 国产
投 递 者 姚星宇
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

这种开发方式很非主流,但我确实有这种需求。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 分别是生成目标路径和原始代码路径,改了就好。

  • TypescriptAndVue 详细介绍 这种开发方式很非主流,但我确实有这种需求。Vue 适合用来开发 SPA 单页应用,所以连官方文档和网络上的各种资料、问答也都是适合用于单页应用的项目配置。 我也是最近因为种种原因才开始接触 Vue,发现对于网页中需要有大量数据变动和组件联动情况下,Vue 还是比较方便的。所以打算用 TypeScript 和 Vue 集成到以前使用 layui 的后台中去

 相关资料
  • 前段时间项目组计划快速开发一个新的App项目,App开发那边提供壳子和部分系统级功能,所有的页面由h5完成,考虑兼容性安卓4.1及ios7.1。全新的项目,没有历史包袱,就尝试了新的开发模式,采用了webpack + vue-cli + vue-router + es6 + axios这一套,从webpack配置到文件目录,从开发流程到上线部署,摸索尝试,到目前第一版已经上线。后面会继续优化,先把

  • 本文向大家介绍vue多页面开发和打包正确处理方法,包括了vue多页面开发和打包正确处理方法的使用技巧和注意事项,需要的朋友参考一下 前段时间做项目,技术栈是vue+webpack,主要就是官网首页加后台管理系统 根据当时情况,分析出三种方案 一个项目代码里面嵌两个spa应用(官网和后台系统) 分开两套项目源码 一套项目源码里面就一个spa应用 思考: 直接否定了一套项目源码里一个spa应用(ui样

  • 本文向大家介绍Vue单页及多页应用全局配置404页面实践记录,包括了Vue单页及多页应用全局配置404页面实践记录的使用技巧和注意事项,需要的朋友参考一下 前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的。 总体思路 无论单页还是

  • 本文向大家介绍用vue构建多页面应用的示例代码,包括了用vue构建多页面应用的示例代码的使用技巧和注意事项,需要的朋友参考一下 最近一直在研究使用vue做出来一些东西,但都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面的Vue应用,以及在这个过程会遇到的问题。 这是我放在GitHub上的项目,里面有整个配置文件,可以参看一下:multiple-vu

  • 本文向大家介绍vue2.0之多页面的开发的示例,包括了vue2.0之多页面的开发的示例的使用技巧和注意事项,需要的朋友参考一下 我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,

  • 本文向大家介绍iOS开发之路--微博“更多”页面,包括了iOS开发之路--微博“更多”页面的使用技巧和注意事项,需要的朋友参考一下 最终效果图: MoreViewController.m 『更多』页面的数据来源more.plist

  • 本文向大家介绍vue-cli单页应用改成多页应用配置详解,包括了vue-cli单页应用改成多页应用配置详解的使用技巧和注意事项,需要的朋友参考一下 前言 从接触vue开始用的是vue-cli直接搭建单页应用,参考配合着vue-router开发起来简直爽到吊炸天,但是由于项目越来越复杂了,单页用起来可能有点力不从心,能不能弄成多页面呢,查了相关资料得到的结论是完全可以的,能多页面多入口,并且可以使用

  • 在模板项目中,所有的路由组件页面都放在 src/pages 下。我们以 NotFound 页面为例,介绍一下页面开发的基本步骤。 添加路由 模板项目使用异步懒加载路由对象的方式,减少首屏请求大小,所以需要在 src/router.js 中定义代码切割点。 然后向 vue-router 的路由列表中添加页面对应的路由对象,代码如下: const NotFound = () => import('@/