84 lines
18 KiB
Plaintext
84 lines
18 KiB
Plaintext
import{r as p,o as e,j as c,h as t,i as n,v as s}from"./.pnpm.8fb36023.js";const l={class:"markdown-body"},u=n("p",{class:"describe-plugin"},"\u6700\u7B80\u5355\u7684\u4F7F\u7528\u65B9\u5F0F\u53C2\u7167\u4EE5\u4E0B CodeSandbox \u6F14\u793A\uFF0C\u4E5F\u63A8\u8350 Fork \u672C\u4F8B\u6765\u8FDB\u884C Bug Report\u3002",-1),i=n("p",null,[n("a",{href:"https://codesandbox.io/s/11mvy",style:{"margin-left":"30px","margin-bottom":"30px","margin-top":"10px",display:"block"}},[n("img",{src:"https://codesandbox.io/static/img/play-codesandbox.svg"})])],-1),k=n("p",{class:"describe-plugin"},"\u4F7F\u7528 npm \u5DE5\u5177\u5B89\u88C5 layui vue\uFF0C\u82E5\u5B89\u88C5\u7F13\u6162\uFF0C\u53EF\u5C1D\u8BD5\u7528 pnpm \u6216\u5176\u4ED6\u955C\u50CF\u6E90\u3002",-1),r=n("div",{class:"language-"},[n("pre",null,[n("code",{"v-pre":""},`npm install @layui/layui-vue --save
|
|
`)])],-1),g=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" App "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'./App.vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" createApp "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(" Layui "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@layui/layui-vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/lib/index.css'"),s(`
|
|
|
|
`),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"use"),n("span",{class:"token punctuation"},"("),s("Layui"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'#app'"),n("span",{class:"token punctuation"},")"),s(`
|
|
`)])])],-1),d=n("p",{class:"describe-plugin"},"\u4EE5\u4E0A\u4EE3\u7801\u4FBF\u5B8C\u6210\u4E86 layui-vue \u7684\u6CE8\u518C\u3002\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C\u6837\u5F0F\u6587\u4EF6\u9700\u8981\u5355\u72EC\u5F15\u5165\u3002",-1),m=n("p",{class:"describe-plugin"},[s("\u9996\u5148\u4F60\u9700\u8981\u5B89\u88C5 "),n("a",{href:"https://github.com/antfu/unplugin-vue-components",target:"_blank",style:{color:"#5FB878"}},[n("code",null,"unplugin-vue-components")]),s(" \u548C "),n("a",{href:"https://github.com/antfu/unplugin-auto-import",target:"_blank",style:{color:"#5FB878"}},[n("code",null,"unplugin-auto-import")]),s(" \u4E24\u6B3E\u63D2\u4EF6\u3002")],-1),y=n("div",{class:"language-"},[n("pre",null,[n("code",{"v-pre":""},`npm install -D unplugin-vue-components unplugin-auto-import
|
|
`)])],-1),v=n("p",{class:"describe-plugin"},"\u7136\u540E\u4FEE\u6539 vite.config.js \u6216 vue.config.js \u7684\u914D\u7F6E\u3002",-1),_=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" AutoImport "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-auto-import/vite'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(" Components "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-vue-components/vite'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" LayuiVueResolver "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'unplugin-vue-components/resolvers'"),s(`
|
|
|
|
`),n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"default"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token literal-property property"},"plugins"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),s(`
|
|
`),n("span",{class:"token function"},"AutoImport"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token literal-property property"},"resolvers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token function"},"LayuiVueResolver"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token function"},"Components"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token literal-property property"},"resolvers"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token punctuation"},"["),n("span",{class:"token function"},"LayuiVueResolver"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),s(`
|
|
`)])])],-1),f=n("p",{class:"describe-plugin"},"Resolver \u89E3\u6790\u5668\u9009\u9879\u914D\u7F6E\u3002",-1),b=n("div",{class:"language-ts"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"export"),s(),n("span",{class:"token keyword"},"interface"),s(),n("span",{class:"token class-name"},"LayuiVueResolverOptions"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token comment"},`/**
|
|
* \u5C06\u6837\u5F0F\u4E0E\u7EC4\u4EF6\u4E00\u8D77\u5BFC\u5165
|
|
*
|
|
* @default 'css'
|
|
*/`),s(`
|
|
importStyle`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"boolean"),s(),n("span",{class:"token operator"},"|"),s(),n("span",{class:"token string"},"'css'"),s(`
|
|
|
|
`),n("span",{class:"token comment"},`/**
|
|
* \u662F\u5426\u89E3\u6790\u56FE\u6807
|
|
*
|
|
* @default false
|
|
*/`),s(`
|
|
resolveIcons`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"boolean"),s(`
|
|
|
|
`),n("span",{class:"token comment"},`/**
|
|
* \u6392\u9664\u4E0D\u9700\u8981\u81EA\u52A8\u5BFC\u5165\u7684\u7EC4\u4EF6
|
|
*
|
|
* eg: exclude: ['LayDocTable', /^LayDoc[A-Z]/,]
|
|
*/`),s(`
|
|
exclude`),n("span",{class:"token operator"},"?"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token builtin"},"Array"),n("span",{class:"token operator"},"<"),n("span",{class:"token builtin"},"string"),s(),n("span",{class:"token operator"},"|"),s(" RegExp"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},";"),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),s(`
|
|
`)])])],-1),h=n("p",{class:"describe-plugin"},"\u539F\u751F\u652F\u6301 es-module \u7684 tree shaking \u7528\u6CD5\u3002",-1),x=n("p",{class:"describe-plugin"},"\u5982\u679C\u4F60\u5B8C\u5168\u4F7F\u7528 layui-vue \u6784\u5EFA\u9879\u76EE, \u6211\u4EEC\u66F4\u63A8\u8350\u5168\u5C40\u6CE8\u518C\u4E0E\u81EA\u52A8\u6309\u9700\u7684\u65B9\u5F0F\u3002",-1),w=n("div",{class:"language-js"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token keyword"},"import"),s(" App "),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'./App.vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" createApp "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token punctuation"},"{"),s(" LayButton"),n("span",{class:"token punctuation"},","),s(" LayTable "),n("span",{class:"token punctuation"},"}"),s(),n("span",{class:"token keyword"},"from"),s(),n("span",{class:"token string"},"'@layui/layui-vue'"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/es/button/index.css'"),n("span",{class:"token punctuation"},";"),s(`
|
|
`),n("span",{class:"token keyword"},"import"),s(),n("span",{class:"token string"},"'@layui/layui-vue/es/table/index.css'"),n("span",{class:"token punctuation"},";"),s(`
|
|
|
|
`),n("span",{class:"token keyword"},"var"),s(" app "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),s(`
|
|
|
|
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"component"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"LayButton"'),n("span",{class:"token punctuation"},","),s(" LayButton"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
|
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"component"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"LayTable"'),n("span",{class:"token punctuation"},","),s(" LayTable"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
|
|
|
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'#app'"),n("span",{class:"token punctuation"},")"),s(`
|
|
`)])])],-1),A=n("p",{class:"describe-plugin"},"\u6839\u636E\u4E0D\u540C\u7684 CDN \u63D0\u4F9B\u5546\u6709\u4E0D\u540C\u7684\u5F15\u5165\u65B9\u5F0F\uFF0C\u6211\u4EEC\u5728\u8FD9\u91CC\u4EE5 unpkg \u4E3E\u4F8B\u3002",-1),L=n("div",{class:"language-html"},[n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token doctype"},[n("span",{class:"token punctuation"},"<!"),n("span",{class:"token doctype-tag"},"DOCTYPE"),s(),n("span",{class:"token name"},"html"),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("html")]),s(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("en"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("head")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("meta")]),s(),n("span",{class:"token attr-name"},"charset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("UTF-8"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("link")]),s(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("stylesheet"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/@layui/layui-vue/lib/index.css"),n("span",{class:"token punctuation"},'"')]),s(),n("span",{class:"token punctuation"},"/>")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/vue@3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"}),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),s(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("//unpkg.com/@layui/layui-vue"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"}),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("head")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("body")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("div")]),s(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("app"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("lay-button")]),s(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),s("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),s("{{ message }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("lay-button")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("div")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),s("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[s(`
|
|
`),n("span",{class:"token keyword"},"const"),s(" App "),n("span",{class:"token operator"},"="),s(),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token function"},"data"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token keyword"},"return"),s(),n("span",{class:"token punctuation"},"{"),s(`
|
|
`),n("span",{class:"token literal-property property"},"message"),n("span",{class:"token operator"},":"),s(),n("span",{class:"token string"},'"Hello World"'),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),s(`
|
|
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),s(`
|
|
`),n("span",{class:"token keyword"},"const"),s(" app "),n("span",{class:"token operator"},"="),s(" Vue"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"createApp"),n("span",{class:"token punctuation"},"("),s("App"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
|
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"use"),n("span",{class:"token punctuation"},"("),s("LayuiVue"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
|
app`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"mount"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},'"#app"'),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),s(`
|
|
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("script")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("body")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),s("html")]),n("span",{class:"token punctuation"},">")]),s(`
|
|
`)])])],-1),R={},T={__name:"getStarted",setup(B,{expose:o}){return o({frontmatter:{}}),(V,q)=>{const a=p("lay-field");return e(),c("div",l,[t(a,{id:"\u5FEB\u901F\u4E0A\u624B",title:"\u5FEB\u901F\u4E0A\u624B",style:{"margin-top":"21px","margin-bottom":"20px"}}),u,i,t(a,{id:"\u5B89\u88C5\u7EC4\u4EF6",title:"\u5B89\u88C5\u7EC4\u4EF6",style:{"margin-top":"21px","margin-bottom":"20px"}}),k,r,t(a,{id:"\u5168\u5C40\u6CE8\u518C",title:"\u5168\u5C40\u6CE8\u518C",style:{"margin-top":"21px","margin-bottom":"20px"}}),g,d,t(a,{id:"\u81EA\u52A8\u6309\u9700",title:"\u81EA\u52A8\u6309\u9700",style:{"margin-top":"21px","margin-bottom":"20px"}}),m,y,v,_,f,b,t(a,{id:"\u624B\u52A8\u5F15\u5165",title:"\u624B\u52A8\u5F15\u5165",style:{"margin-top":"21px","margin-bottom":"20px"}}),h,x,w,t(a,{id:"\u5728\u7EBF\u5B89\u88C5",title:"\u5728\u7EBF\u5B89\u88C5",style:{"margin-top":"21px","margin-bottom":"20px"}}),A,L])}}};export{T as default,R as frontmatter};
|