将 Vue SFC 形式转化为普通的 HTML+CSS+JS

码上掘金在最近的更新中添加了 Vue SFC 的编辑功能

这里有个例子：

但是类似于 Codepen，由于不像 CodeSandbox 那样支持多文件编辑，所以暂时没有找到在 Vue SFC 写法中使用 Vuex 的办法

实际上，在这个版本发布之前，我们就可以利用原生的 JavaScript 编辑来调用 Vue 中的 API。具体的做法如下：

1. 把 SFC 中的 template 写到 HTML 编辑区，并增加一个 id="app" 的根节点
2. 把 SFC 中的 style 写到 Style 编辑区
3. 把 SFC 中的 script 写成 new Vue 的形式，其中需要手动指定挂载的元素 el: "app"
4. 手动在设置中引入 vue 外链，这里用的是 vue 2：

https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js

按照上述步骤进行修改，代码如下：

导入 Vuex

根据上面的步骤改写完毕之后，那么使用 Vuex 也非常容易了，也可以参考 Vuex 的官方文档。

首先在设置中引入 vuex 的外链，注意 vue 2 引入 3.x 版本的， vue 3 引入 4.x 版本的

https://unpkg.com/vuex@3.6.2/dist/vuex.js
https://unpkg.com/vuex@4.0.2/dist/vuex.global.js

然后根据文档所示，在 Script 代码去创建 store 对象，并添加到 new Vue 参数对象中即可。

最后再转载一个来自 Codepen 上的更复杂的 todolist