TypeScript + Vue 传统多页面开发模式配置方案
2018-03-30 09:31
375 查看
这种开发方式很非主流,但我确实有这种需求。Vue 适合用来开发 SPA 单页应用,所以连官方文档和网络上的各种资料、问答也都是适合用于单页应用的项目配置。
我也是最近因为种种原因才开始接触 Vue,发现对于网页中需要有大量数据变动和组件联动情况下,Vue 还是比较方便的。所以打算用 TypeScript 和 Vue 集成到以前使用 layui 的后台中去,开发一些新的比较复杂的页面。
这一套配置,我花了4天研究出来,也算是弥补这一领域的空缺吧。前端高手勿喷,我只是一个更倾向于后端的开发者,多页面应用目前确实还有很多应用,否则 layui 也不会这么受欢迎了!
配置方案码云地址:https://gitee.com/yurunsoft/TypescriptAndVue
开发语言: TypeScript
用到的 JS 库:
jQuery、RequireJS、Vue (可选)、其它(如 layui 你都可以自己集成进来)
编译工具: gulp
TS 代码提示: typings
无报错
支持传统多页面入口开发模式
对,我就是因为 TypeScript 写类比 JavaScript 好看好理解,才用的!
光光依靠 VSCode 本身的
在项目目录下执行
在项目目录下执行
在 VSCode 中按
两个文件:
我也是最近因为种种原因才开始接触 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目录中去。
使用方法
首先你得有 NodeJS 和 TypeScript 环境,这就不说了,自己百度,简单。在项目目录下执行
npm install,用于安装 typings、gulp 等
在项目目录下执行
typings install,用于安装代码提示所需文件
在 VSCode 中按
Ctrl + Shift + B运行生成任务。一旦你修改了
.ts文件,会自动编译到
js目录中。
配置修改
根据实际项目情况,你肯定不会用我这个 demo 的目录结构,所以你需要改目录。两个文件:
tsconfig.json和
gulpfile.js
./js和
./ts分别是生成目标路径和原始代码路径,改了就好。
相关文章推荐
- MOSS字段编辑权限控制方案的实现(1)-管理页面的开发和配置信息的持久化
- MOSS字段编辑权限控制方案的实现(1)-管理页面的开发和配置信息的持久化
- MOSS字段编辑权限控制方案的实现(1)-管理页面的开发和配置信息的持久化
- web之vue+vue-router+jquery 以传统模式开发单页面应用
- vue-cli dev模式下图片路径配置 和build下图片路径的配置
- struts2配置常量<constant name="struts.devMode">,将值修改为true(开发模式有什么好处)的好处
- FE - weex 开发之 配置 vue 与 vue - router环境
- WIN7下.Net开发遇到的又一问题:HTTP 错误 500.19 - Internal Server Error,无法访问请求的页面,因为该页的相关配置数据无效。
- Vue 开发教程之一 环境配置
- 全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)
- X5的UI部分和传统Web页面开发的差异
- 微信公众帐号开发教程第4篇-----开发模式启用及接口配置Java
- AndroidStudio2.2 Preview3中NDK开发之CMake和传统 JNI在目录结构和配置文件上的区别
- 在企业级应用开发中,使用全局jsp变量为所有jsp页面配置信息
- vue开发请求本地模拟数据的配置方法
- angular+ionic开发的页面,当子页面需要从父组件带参进入又需要可以脱离父组件进入,怎么配置?
- webstorm下vuejs开发配置
- 携程Apollo(阿波罗)配置中心本地开发模式不接入配置中心进行本地开发
- 微信公众帐号开发教程第3篇-开发模式启用及接口配置
- AndroidStudio2.2中NDK开发之CMake和传统 JNI在目录结构和配置文件上的区别