Yii2 中使用ts
在运行环境 vagrant Ubuntu box 中安装 sass ,typescript等
安装需要的软件:
sudo su -c "gem install sass" # 可选,安裝sass
sudo su -c "npm install -g typescript" # 可选,ts命令
sudo su -c "npm install -g less" # 可选,less命令
sudo su -c "npm install stylus -g" # 可选,stylus命令
sudo su -c "npm install -g coffee-script" # 可选,coffee命令
上面的 npm
命令依赖 系统已安装好ruby
, node
上面的gem,npm命令在 windows的cmd中可以运行的
使用的是 Advanced 模板,修改 common/config/main.php
(如果是 Basic 模板,修改config/web.php
文件),在components
数组中添加 assetManager
元素 配置
'assetManager' => [
'converter' => [
'class' => 'yii\web\AssetConverter',
'commands' => [
'scss' => ['css', 'sass {from} {to} --sourcemap'],
// 其他命令
'less' => ['css', 'lessc {from} {to} --no-color --source-map'],
'sass' => ['css', 'sass {from} {to} --sourcemap'],
'styl' => ['css', 'stylus < {from} > {to}'],
'coffee' => ['js', 'coffee -p {from} > {to}'],
'ts' => ['js', 'tsc --out {to} {from}'],
],
],
],
效果类似如下图:
在 AppAsset.php 中直接引入 ts,sass 文件
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/index.scss', // 引入 scss 文件
];
public $js = [
'js/index.ts', //引入 ts 文件
];
// 其他内容...
}
index.ts 示范内容
let myName = "hello";
最后网页自动导入的是 index.js,装换的内容是:
var myName = "hello";
当编辑 上面的 index.css
或者 index.ts
,就会装换为对应的 css 或者 js 文件了.
References
- yii2 清楚如何使用ts了
- 5分钟上手TypeScript
- Less 使用方法 安装
- Get styling with Stylus
- CoffeeScript 中文
- Yii2-资源管理(Assets) 使用资源转换器
Yii2 中使用ts的更多相关文章
- yii2中如何使用modal弹窗之基本使用
作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...
- Yii2中多表关联查询(join、joinwith)
我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name ...
- PHP在yii2中封装SuperSlide 幻灯片编写自己的SuperSlideWidget的例子
因为近期给朋友公司做个门户网站,把荒置了6.7年的PHP又重新拾起,发现PHP这些年兴旺多了,很多新的东西看的不明不白,研究了几个框架ZendFramework.thinkphp.Symfony.yi ...
- [moka同学笔记]Yii2中多表关联查询(join、joinwith) (摘录)
表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name cu ...
- Yii2.0中文开发向导——Yii2中多表关联查询(join、joinwith)(转)
我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_ ...
- Yii2.0中文开发向导——Yii2中多表关联查询(join、joinwith)
我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_ ...
- yii2中的url美化
在yii2中,如果想实现类似于post/1,post/update/1之类的效果,官方文档已经有明确的说明 但是如果想把所有的controller都实现,这里采用yii1的方法 'rules' =&g ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- (原)关于MEPG-2中的TS流数据格式学习
关于MEPG-2中的TS流数据格式学习 Author:lihaiping1603 原创:http://www.cnblogs.com/lihaiping/p/8572997.html 本文主要记录了, ...
随机推荐
- 【Python】- scrapy 爬取图片保存到本地、且返回保存路径
https://blog.csdn.net/xueba8/article/details/81843534
- k小子串 SPOJ - SUBLEX 2
题意: 求字典序第K大的子串 题解: 先求出后缀自动机对应节点 // 该节点后面所形成的自字符串的总数 然后直接模拟即可 #include <set> #include <map&g ...
- transport error 202: bind failed: Address already in use
background: I have terminated some test debugger without properly saying goodbye. the JDWP didn't cl ...
- ES6解构
解构:“解开--重构” 1.数组的解构: //数组的解构: // let arr=[1,2,3,6] // let[a,b,c,d]=arr; // console.log(a,b,c,d)// 1, ...
- 2019-9-11-.NET-Standard
title author date CreateTime categories .NET Standard lindexi 2019-9-11 9:0:29 +0800 2019-9-11 9:0:2 ...
- VS2012在win7 64位机中x86和x64下基本类型的占用空间大小(转)
VS2012在win7 64位机中x86和x64下基本类型的占用空间大小 #include "stdafx.h" #include <windows.h> int _t ...
- php7 安装时需求的依赖包
php70 php70-bcmath php70-cli php70-common php70-devel php70-fpm php70-gd php70-json php70-mbstring p ...
- docker一键部署zookeeper
version: '3.1' services: zoo1: image: zookeeper:3.4.11 restart: always hostname: zoo1 container_name ...
- PS安装失败解决方法
清除Adobe软件卸载残余文件 ,使用下面的工具,可以清除残余文件,然后再次安装 链接: https://pan.baidu.com/s/1OfIDnjpmqw34dWQ8LH6fIQ 提取码: b7 ...
- 再学 GDI+文本输出文本样式
代码文件: unit Unit1; interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls ...