如何运行一个vue文件进行预览
如何预览一个.vue文件进行预览呢?
每天写个页面,都要配置脚手架,能不能像以前开发前端页面一样,写一个index.html,然后编写js,css,就可以在浏览器上运行了呢?可是我又不想舍弃vue,那么能不能全局搭建一个脚手架,供我来使用呢?
今天翻阅文档,发现了官方文档给出了一个方案
安装
1 2 3 | npm install -g @vue/cli @vue/cli-service-global # or yarn global add @vue/cli @vue/cli-service-global |
运行
1 | vue serve MyComponent.vue |
是不是很方便~
看了下实现思路
1、自己编写了vue工程的模版
2、内置了一套默认的vue的配置
3、使用node执行命令
下面就开始自己撸代码,写了一个简版的:
首先我想要像node运行js文件一样,直接
1 | pv run index.vue |
读取文件内容 写入到APP.vue,添加到默认脚手架中,展示UI
1 2 3 4 5 6 7 8 | program.command( 'run' ) .description( 'run a project' ) .action(async (name,router) => { // console.log(typeof router); if ( typeof router === 'object' ){ sigleVue(name) } }) |
那么重点就是实现sigleVue.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | const filePath = path. join (process.env.PWD, name) const templateDir = path. join (__dirname, '../template' ) const templatePath = path. join (templateDir, 'src/App.vue' ) try { //热更新 const content = ` <template> <div> <Test></Test> </div> </template> <script> import Test from '${filePath}' export default { components:{ Test } } </script> ` await fs.writeFileSync(templatePath, content) //执行npm run dev 命令 cd(templateDir) if (exec( 'npm run dev' ).code !== 0) { exit(1); } } catch (error) { console.error(error) } |
这样,我就可以像预览js文件一样预览vue文件了。
1 2 | //代码放桌面 node ~/desktop/pv-cli/bin/index run index.vue |
是不是很简单。
ps:.vue文件下需要vue的npm包依赖
代码地址:
https://github.com/yiyibao/pv-cli
如果觉得文章不错,可以给小编发个红包给予鼓励.
你要觉得这篇文章比较好,记得点推荐!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」