完善项目目录
|src
--|component
------|common
------|welcome.html
------|layout.html
--|conf
------|config.class.ts
------|enum.class.ts
--|controller
------|base.controller.ts
------|layout.controller.ts
------|welcome.controller.ts
--|interface
------|pageOption.interface.ts
--|style
------|index.less
------|variable.less
------|layout.less
--|utils
------|utils.class.ts
--|app.ts
目前项目目录是这个样子，随写随改吧
具体每个文件的实现和开发思路以后会一一描述的
加载html组件
以往大家使用vue等框架时组件的引入都是由框架或loader完成的比如vueloader等，那么在这个项目中并没有使用框架，html文件怎么才能引入到另一个页面中呢
这里就需要用到raw-loader 和 text-loader
命令行输入npm install raw-loader text-loader --save-dev
安装成功后开始修改webpack.config.js module下的rules增加
{
test: /\.html/,
loader: 'raw-loader',
},
因为是ts项目 所以需要些一个ts的声明文件
src目录下创建typing.d.ts
// typings.d.ts
declare module "*.html"{
const content: String;
export default content;
}
修改welcome.html
<!-- 欢迎页 -->
<div class="welcome">
welcome
</div>
修改index.html 给应用在主html文件中创建一个容器
<body>
<div id="app"></div>
</body>
修改./src/app.ts
// ./src/app.ts
import html from './component/welcome.html';
import * as $ from 'jquery';
import "./style/index.less";
import 'font-awesome/css/font-awesome.css';
class App {
constructor(){
this.init();
}
private init():void{
$('#app').append(<string>html);
}
}
new App();
!!! 注意这里面因为jq的append方法要求的类型是个string但是import进来的html无法明确类型，所以这里用到了ts中的断言，一般情况下不建议这样用的，后面想到好办法了再说咯
运行一下项目
image.png
一个welcome出来咯
此致
敬礼~
小旋风
我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243
网友评论