TypeScript + Vue 传统多页面开发模式配置方案-阿里云开发者社区

开发者社区> 开发与运维> 正文

TypeScript + Vue 传统多页面开发模式配置方案

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

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

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

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

配置方案码云地址:https://gitee.com/yurunsoft/TypescriptAndVue

项目组成

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 的问题……

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 分别是生成目标路径和原始代码路径,改了就好。

原文发布时间为:2018年03月30日
原文作者:宇润 

本文来源:开源中国 如需转载请联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章