https://github.com/wscats/vueno

Vue Conversion Plugin
https://github.com/wscats/vueno

plugin transform vscode-extension vue

Last synced: 15 days ago
JSON representation

Vue Conversion Plugin

• Host: GitHub
• URL: https://github.com/wscats/vueno
• Owner: Wscats
• Created: 2019-06-05T04:43:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T05:15:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-16T19:41:27.048Z (about 1 month ago)
• Topics: plugin, transform, vscode-extension, vue
• Language: JavaScript
• Homepage:
• Size: 1.37 MB
• Stars: 124
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Vueno

`.html`文件处理为`.vue`文件

# 贡献者

| [
Eno Yao](https://github.com/Wscats)| [
Aaron Xie](https://github.com/aaron-xie)| [
DK Lan](https://github.com/dk-lan)| 
Xin| 
Lemon  |  
Jing  |  
Lin  |

| - | - | - | - | - | - | - |

# 使用

在VSC中打开任何`.html`后缀文件，修改并保存，将自动转换为`.vue`的单文件组件

例如有文件`test.html`内容如下:

```html

    

    

    

    Document

    

        div {

            color: red

        }

    

    

        console.log('Eno Yao')

    

    
Eno Yao

    
Hello World

    

        console.log('Hello World')

    


```

保存文件后，将在同目录下生成`test.html.vue`文件，内容如下

```html

  


    
Eno Yao

    
Hello World

  


export default {};

div {

  color: red;

}

```

例如：我们要仿造美团外卖的网站，你可以打开 https://h5.waimai.meituan.com/login 美团的官网，点击鼠标右键显示网页源代码复制到 `VS Code` 的 `.html` 格式文件中，然后保存就可以生成 `.vue` 后缀的文件了。

![demo](logos/1.png)