[{"data":1,"prerenderedAt":127},["ShallowReactive",2],{"content:\u002Fposts\u002F2024\u002Fhistoire-setup":3,"surround:\u002Fposts\u002F2024\u002Fhistoire-setup":116},{"id":4,"title":5,"body":6,"canonical":93,"categories":94,"date":96,"description":93,"draft":97,"extension":98,"image":93,"meta":99,"navigation":100,"path":101,"permalink":93,"readingTime":102,"recommend":93,"references":107,"seo":111,"sitemap":112,"stem":113,"tags":114,"type":93,"updated":96,"__hash__":115},"content\u002Fposts\u002F2024\u002Fhistoire-setup.md","浅尝histoire",{"type":7,"value":8,"toc":88},"minimark",[9,13,24,31,39,42,64,72,77,80],[10,11,12],"p",{},"安装 histoire",[14,15,21],"pre",{"className":16,"code":18,"language":19,"meta":20},[17],"language-shell","pnpm i -D histoire @histoire\u002Fplugin-vue\n","shell","",[22,23,18],"code",{"__ignoreMap":20},[10,25,26,27,30],{},"创建 ",[22,28,29],{"code":29},"histoire.config.ts"," 配置文件",[14,32,37],{"className":33,"code":35,"language":36,"meta":20},[34],"language-ts","import { HstVue } from \"@histoire\u002Fplugin-vue\"\nimport { defineConfig } from \"histoire\"\n\nexport default defineConfig({\n    plugins: [HstVue()],\n})\n","ts",[22,38,35],{"__ignoreMap":20},[10,40,41],{},"添加启动命令",[43,44,45,52,58],"ul",{},[46,47,48,51],"li",{},[22,49,50],{"code":50},"histoire dev"," 开发环境启动",[46,53,54,57],{},[22,55,56],{"code":56},"histoire build"," 打包",[46,59,60,63],{},[22,61,62],{"code":62},"histoire preview"," 打包并预览打包结果",[14,65,70],{"className":66,"code":68,"language":69,"meta":20},[67],"language-json","{\n  \"scripts\": {\n    \"story:dev\": \"histoire dev\",\n    \"story:build\": \"histoire build\",\n    \"story:preview\": \"histoire preview\",\n  },\n}\n","json",[22,71,68],{"__ignoreMap":20},[73,74,76],"h2",{"id":75},"编写-story","编写 story",[10,78,79],{},"使用.story.vue 结尾的文件会被 histoire 自动识别为 story 组件，该文件中只需要再根节点使用 Story 标签即可",[14,81,86],{"className":82,"code":84,"language":85,"meta":20},[83],"language-html","\u003Cscript lang=\"ts\" setup>\nimport HelloWorld from \".\u002FHelloWorld.vue\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003CStory>\n        \u003CHelloWorld msg=\"Hello Vue 3 + Vite\" \u002F>\n    \u003C\u002FStory>\n\u003C\u002Ftemplate>\n","html",[22,87,84],{"__ignoreMap":20},{"title":20,"searchDepth":89,"depth":89,"links":90},4,[91],{"id":75,"depth":92,"text":76},2,null,[95],"代码","2024-03-14 20:08:00",false,"md",{},true,"\u002Fposts\u002F2024\u002Fhistoire-setup",{"text":103,"minutes":104,"time":105,"words":106},"1 min read",0.63,37800,126,[108],{"title":109,"link":110},"histoire","https:\u002F\u002Fhistoire.dev\u002F",{"title":5,"description":93},{"loc":101},"posts\u002F2024\u002Fhistoire-setup",[],"0yuela6FBVP43vyBjQa1s3jui6bMG9jpZ_HXwbMSXTM",[117,122],{"title":118,"path":119,"stem":120,"date":121,"type":93,"children":-1},"Vue3 权限指令","\u002Fposts\u002F2024\u002Fvue3-permission-directive","posts\u002F2024\u002Fvue3-permission-directive","2024-03-09 23:23:27",{"title":123,"path":124,"stem":125,"date":126,"type":93,"children":-1},"浏览器渲染原理","\u002Fposts\u002F2024\u002Fjs-browser-render","posts\u002F2024\u002Fjs-browser-render","2024-03-16 23:53:00",1789642592602]