单纯 js 脚本方式能用那些前端框架吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1457 天前的主题，其中的信息可能已经有所发展或是发生改变。

不是前端工程项目的方式。
比如引入个 vue 脚本文件再引用 element 的脚本和样式。
这样能玩的起来吗？

脚本

Vue

element

前端

13 条回复 • 2020-11-22 11:42:12 +08:00

bojackhorseman

2020-11-19 23:21:05 +08:00 via iPhone

能的，这些框架和酷都提供了 html 直接引入的方式

azev

2020-11-19 23:22:17 +08:00

@bojackhorseman 多谢看到 element 的例子了

DOLLOR

2020-11-19 23:28:45 +08:00

https://codepen.io/ziyoung/pen/rRKYpd

vue+element-ui，可以无需任何打包构建流程，只需引入三个外部文件就可以干活了：
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

ClericPy

2020-11-20 00:10:28 +08:00

已经用这种 cdn 方式用了好几年的路过... 就这种引入方式加浏览器自带 JS 解释器的环境, 简直得天独厚了

azev

2020-11-20 09:33:55 +08:00

@bojackhorseman @DOLLOR @ClericPy 多谢
昨天试了下感觉不是太理想页面刚载入时会是一大堆无样式文本闪一下才能正确显示
这种方式是页面每次展示都要花时间进行一次类似工程项目的编译吧

DOLLOR

2020-11-20 09:55:44 +08:00

@azev 你需要 v-cloak 指令来隐藏渲染前的模板。参见：
https://cn.vuejs.org/v2/api/index.html#v-cloak

azev

2020-11-20 11:52:58 +08:00

@DOLLOR 多谢试了很不错

azev

2020-11-20 13:10:43 +08:00

@DOLLOR 是不是前端工程项目编译发布的方式不会存在那个问题了？

DOLLOR

2020-11-20 15:17:52 +08:00

@azev
只要不把模板写在 HTML 文件里就不会出现这种现象。
编译发布的方式，通常会把模板写在*.vue 文件里，确实就不会发生这种现象。

azev

2020-11-21 22:00:44 +08:00

@ClericPy 用的哪个框架？今天试了下感觉 vue 要比 react 适合这么做。
html 里插入 react 组件还要使用脚本的方式太繁琐了 vue 基本就是直接放标签元素就行了

ClericPy

2020-11-21 22:16:38 +08:00

@azev 我就是 cdn 引用 vue 和 element, 最近想折腾 vuetify, 为了自适应... 我不是真前端, 就是不想写 GUI, 所以拿来写个交互而已(要不是某些人不喜欢 terminal UI...)

TmacV2

2020-11-22 11:32:30 +08:00 via iPhone

不懂就问如果你写组件然后想复用 import 之类的操作没有打包工具加持行吗

azev

2020-11-22 11:42:12 +08:00

@TmacV2 没有自己写的组件都是用第三方组件