Vue 的 CSS-in-JS 方案

2019-01-08 22:11:22 +08:00
 gilgamesh


GitHub: https://github.com/egoist/styled-vue

4955 次点击
所在节点    Vue.js
17 条回复
noe132
2019-01-08 22:48:32 +08:00
其实 angular 那种一个 ts 文件为组件入口,在 @Component 装饰器里声明模板和样式文件的位置,由 compiler 编译为一个组件的方式最理想。
noe132
2019-01-08 22:50:21 +08:00
我倒是很反感把 html css js 写在一个文件里。有些组件会比较大,代码几百行到 1 千行,上下翻动找 html,css,js,真不如分成 3 个文件,在编辑器里切 tab 来的方便
brotherlegend
2019-01-08 23:17:01 +08:00
楼主这个是什么编辑器主题与字体,好看啊
IamJ
2019-01-09 01:55:13 +08:00
同求字体
Hilong
2019-01-09 07:44:23 +08:00
感觉实现略丑陋,这样写,嵌套和编辑器提示可以吗?
kawaiidora
2019-01-09 08:00:19 +08:00
这不是把 react 的 styled-components 搬过来了么,vue 用户又多了个选择。

@noe132 我倒觉得写一个文件里方便些,大概是因为没写过那么大的组件吧
murmur
2019-01-09 08:18:45 +08:00
vue 不是支持三段式组件么 这种行内 css 是真的丑陋
njstt
2019-01-09 08:19:30 +08:00
字体是 mononoki
wangxiaoaer
2019-01-09 08:32:38 +08:00
真是丑出天际,之所以不想用 react 和 ng,就是没有类似 vue 这种单文件,文件夹爆炸难受死了。
binaryify
2019-01-09 08:46:47 +08:00
@noe132 Vue 一直都可以分离啊
chouchoui
2019-01-09 09:46:04 +08:00
这字体是 Fira Code 吧
Elephant696
2019-01-09 10:31:10 +08:00
@noe132 vue 文件也支持分离,只是很多人没有注意到。一般代码量不多确实写在一个 vue 文件里面好一点,也方便管理。不过代码量上去了我还是喜欢把 css 抽出来。
Elephant696
2019-01-09 10:33:45 +08:00
最讨厌的就是 CSS-in-JS 的写法,写起来难受,看起来更丑陋
kingwl
2019-01-09 10:34:01 +08:00
还是比较喜欢写 JSX/TSX 然后就随便用 css in js 方案了
whitev2
2019-01-09 11:15:07 +08:00
等一个 html-in-JS,前端好不容易 html、css、js 都分开了,结果现在又要都混一起了
noe132
2019-01-09 11:22:31 +08:00
@binaryify @Elephant696
我的意思是
以 ts 文件作为组件入口
就是其他文件 import 进来时 import 一个 ts 文件而不是 vue 文件
原因是因为 import ts 进来有类型说明,在用到 refs 时可以直接指定为当前类,而 import vue 的话做不到。
希望 vue3 有所改善
TomVista
2019-01-11 11:09:36 +08:00
@whitev2 css 对象 class 对象可以抽出来,放到别的位置.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="js/vue.js"></script>
</head>
<body>
<div id="test" v-bind:style='[state.isSelect?styles.testSelect:styles.testNoSelect]' v-bind:class='[]'>

</div>
<script>
var test = new Vue ({
el:'#test',
data:{
state:{
isSelect:true
},
styles:{
testSelect:{
'width':'100px',
'height':'100px',
'background-color':'red'
},
testNoSelect:{
'width':'100px',
'height':'100px',
'background-color':'blue'
}
},
classes:{

}
}
});
</script>
</body>
</html>

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/525170

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX