{"id":59,"date":"2020-04-04T22:11:56","date_gmt":"2020-04-04T14:11:56","guid":{"rendered":"https:\/\/www.bailicao.top\/?p=59"},"modified":"2020-04-04T22:11:57","modified_gmt":"2020-04-04T14:11:57","slug":"%e5%8a%9b%e8%8d%90-35-%e4%b8%aa%e6%9c%80%e5%a5%bd%e7%94%a8%e7%9a%84-vue-%e5%bc%80%e6%ba%90%e5%ba%93%ef%bc%81","status":"publish","type":"post","link":"https:\/\/www.bailicao.com\/index.php\/2020\/04\/04\/%e5%8a%9b%e8%8d%90-35-%e4%b8%aa%e6%9c%80%e5%a5%bd%e7%94%a8%e7%9a%84-vue-%e5%bc%80%e6%ba%90%e5%ba%93%ef%bc%81\/","title":{"rendered":"\u529b\u8350 35 \u4e2a\u6700\u597d\u7528\u7684 Vue \u5f00\u6e90\u5e93\uff01"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/p1.pstatp.com\/large\/pgc-image\/caebdb0a06a54d5788b2df17a7cac3af\" alt=\"\u529b\u8350 35 \u4e2a\u6700\u597d\u7528\u7684 Vue \u5f00\u6e90\u5e93\uff01\"\/><\/figure>\n\n\n\n<p>\u65e0\u8bba\u662f\u5f00\u53d1\u65b0\u624b\u8fd8\u662f\u7ecf\u9a8c\u4e30\u5bcc\u7684\u8001\u624b\uff0c\u6211\u4eec\u90fd\u559c\u6b22\u5f00\u6e90\u8f6f\u4ef6\u5305\u3002\u5bf9\u4e8e\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u5982\u679c\u6ca1\u6709\u8fd9\u4e9b\u5f00\u6e90\u8f6f\u4ef6\u5305\uff0c\u5f88\u96be\u60f3\u8c61\u6211\u4eec\u7684\u751f\u6d3b\u4f1a\u53d8\u5f97\u591a\u4e48\u75b2\u60eb\u4e0d\u582a\uff0c\u800c\u4e14\u9760\u5496\u5561\u5ea6\u65e5\u4e5f\u4f1a\u6210\u4e3a\u5bb6\u5e38\u4fbf\u996d\u3002\u6240\u5e78\u7684\u662f\uff0c\u968f\u7740 Vue.js \u548c Nuxt.js \u793e\u533a\u7684\u4e0d\u65ad\u58ee\u5927\uff0c\u6bcf\u5929\u90fd\u4f1a\u51fa\u73b0\u4e00\u4e9b\u5f88\u597d\u7684\u8f6f\u4ef6\u5305\u3002<\/p>\n\n\n\n<p>\u5728\u4e0b\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u63a8\u8350\u4e00\u4e9b\u975e\u5e38\u597d\u7528\u7684 Vue \u548c Nuxt \u8f6f\u4ef6\u5305\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Vue.js<\/h1>\n\n\n\n<p>Vue.js \u662f\u4e00\u4e2a\u975e\u5e38\u6613\u7528\u7684\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6\uff0c\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\u3002<\/p>\n\n\n\n<p><strong>1.Vue Dark Mode<\/strong><\/p>\n\n\n\n<p>Vue.js \u7684\u4e00\u4e2a\u6781\u7b80\u4e3b\u4e49\u7684\u6df1\u8272\u8bbe\u8ba1\u7cfb\u7edf\u3002\u5b83\u63d0\u4f9b\u4e86\u57fa\u672c\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6784\u5efa\u5931\u7720\u8005\u6700\u559c\u6b22\u7684\u6df1\u8272\u754c\u9762\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/LeCoupa\/vuedarkmode\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; LeCoupa\/vuedarkmode: \u200d\u200d A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.<\/a><\/p>\n\n\n\n<p><strong>2.Vetur<\/strong><\/p>\n\n\n\n<p>VS Code \u7684 Vue \u5de5\u5177\u3002\u5982\u679c\u4f60\u662f Vue.js \u8d85\u7ea7\u7528\u6237\uff0c\u5fc5\u987b\u5c1d\u8bd5\u4e00\u4e0b\uff01<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/vuejs\/vetur\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; vuejs\/vetur: Vue tooling for VS Code.<\/a><\/p>\n\n\n\n<p><strong>3.Vue VS Code Snippets<\/strong><\/p>\n\n\n\n<p>\u8fd9\u4e9b\u7247\u6bb5\u5f88\u68d2\uff0c\u4ece\u6211\u5f00\u59cb\u5b66\u4e60 Vue.js \u65f6\u5c31\u4e00\u76f4\u5728\u7528\u5b83\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/sdras\/vue-vscode-snippets\" target=\"_blank\" rel=\"noreferrer noopener\">\u300c\u94fe\u63a5\u300d<\/a><\/p>\n\n\n\n<p><strong>4.Bootstrap-Vue<\/strong><\/p>\n\n\n\n<p>\u63d0\u4f9b\u4e86\u6700\u5168\u9762\u7684 Bootstrap V4 \u5b9e\u73b0\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/bootstrap-vue.js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">BootstrapVue<\/a><\/p>\n\n\n\n<p><strong>5.Vue Native<\/strong><\/p>\n\n\n\n<p>\u4f60\u662f React Native \u7684\u7c89\u4e1d\u5417\uff1f\u5c31\u50cf React Native \u4e00\u6837\uff0cVue Native \u6846\u67b6\u5141\u8bb8\u4f60\u4f7f\u7528 JavaScript \u6765\u6784\u5efa\u8de8\u5e73\u53f0\u7684\u539f\u751f\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/vue-native.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u300c\u94fe\u63a5\u300d<\/a><\/p>\n\n\n\n<p><strong>6.NativeScript Vue<\/strong><\/p>\n\n\n\n<p>\u5982\u679c\u4f60\u66f4\u559c\u6b22 NativeScript\uff0c\u8fd9\u4e2a\u5305\u53ef\u4ee5\u5e2e\u52a9\u4f60\u4f7f\u7528 NativeScript \u548c Vue.js \u6784\u5efa\u539f\u751f\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/nativescript-vue\/nativescript-vue\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; nativescript-vue\/nativescript-vue: Native mobile applications using Vue and NativeScript.<\/a><\/p>\n\n\n\n<p><strong>7.Vue Content Placeholders<\/strong><\/p>\n\n\n\n<p>\u5728\u83b7\u53d6\u771f\u5b9e\u5185\u5bb9\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u53ef\u7ec4\u5408\u7ec4\u4ef6\u6e32\u67d3\u865a\u5047\u7684\u6e10\u8fdb\u5f0f\u5185\u5bb9\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/michalsnik\/vue-content-placeholders\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; michalsnik\/vue-content-placeholders: Composable components for rendering fake (progressive) content like facebook in vue<\/a><\/p>\n\n\n\n<p><strong>8.Vue Autosuggest<\/strong><\/p>\n\n\n\n<p>\u4e00\u4e2a\u5f88\u68d2\u7684 Vue.js \u81ea\u52a8\u63d0\u793a\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/darrenjennings\/vue-autosuggest\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; darrenjennings\/vue-autosuggest: Vue autosuggest component.<\/a><\/p>\n\n\n\n<p><strong>9.Vue Clipboard<\/strong><\/p>\n\n\n\n<p>\u4e00\u4e2a\u7b80\u5355\u7684 Vue.js \u5305\uff0c\u5141\u8bb8\u7528\u6237\u5c06\u6587\u672c\u590d\u5236\u5230\u57fa\u4e8eclipboard.js\u7684\u526a\u8d34\u677f\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/vue-clipboard2.inndy.tw\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u300c\u94fe\u63a5\u300d<\/a><\/p>\n\n\n\n<p><strong>10.Vue Clickaway<\/strong><\/p>\n\n\n\n<p>\u4e00\u79cd\u53ef\u91cd\u590d\u4f7f\u7528\u7684\u70b9\u51fb\u6307\u4ee4\uff0c\u53ef\u68c0\u6d4b\u5e76\u54cd\u5e94\u5143\u7d20\u5916\u90e8\u7684\u70b9\u51fb\u52a8\u4f5c\u3002\u5f53\u6211\u4eec\u9700\u8981\u5173\u95ed\u6a21\u6001\u7a97\u53e3\u6216\u9690\u85cf\u4e0b\u62c9\u5217\u8868\u65f6\u4f1a\u975e\u5e38\u65b9\u4fbf\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/simplesmiler\/vue-clickaway\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; simplesmiler\/vue-clickaway: Reusable clickaway directive for reusable Vue.js components<\/a><\/p>\n\n\n\n<p><strong>11.Vue Waypoint<\/strong><\/p>\n\n\n\n<p>Vue.js \u7684 v-waypoint \u6307\u4ee4\uff0c\u7528\u4e8e\u5728\u6eda\u52a8\u65f6\u89e6\u53d1\u51fd\u6570\u3002\u5f53\u4f60\u60f3\u8981\u5728\u6eda\u52a8\u65f6\u89e6\u53d1\u52a8\u753b\uff0c\u5b83\u5c31\u53ef\u4ee5\u6d3e\u4e0a\u7528\u573a\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/scaccogatto\/vue-waypoint\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; scaccogatto\/vue-waypoint: v-waypoint directive for Vue, this is the easiest way to trigger a function when you scroll<\/a><\/p>\n\n\n\n<p><strong>12.Vue Virtual Scroller<\/strong><\/p>\n\n\n\n<p>\u7528\u4e8e Vue.js \u5e94\u7528\u7a0b\u5e8f\u7684\u5feb\u901f\u65e0\u9650\u5236\u6eda\u52a8\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/Akryum\/vue-virtual-scroller\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; Akryum\/vue-virtual-scroller: \u26a1\ufe0f Blazing fast scrolling for any amount of data<\/a><\/p>\n\n\n\n<p><strong>13.Vue Slideout<\/strong><\/p>\n\n\n\n<p>Slideout.js \u7684 Vue.js \u5b9e\u73b0\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/vouill\/vue-slideout\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; vouill\/vue-slideout: Simple vue implementation of Slideout.js touch sidebar \/ sidemenu library<\/a><\/p>\n\n\n\n<p><strong>14.Vue Swing<\/strong><\/p>\n\n\n\n<p>\u5b83\u662fSwing\u7684 vue.js \u5305\u88c5\u5668\uff0c\u4e00\u4e2a\u5361\u7247\u5f62\u5f0f\u7684\u754c\u9762\uff08swipe-left \u5bf9\u5e94\u662f\uff0cswipe-right \u5bf9\u5e94\u5426\uff09\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/goweiwen\/vue-swing\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; goweiwen\/vue-swing: Vue.js wrapper for Swing<\/a><\/p>\n\n\n\n<p><strong>15.Vue Quill Editor<\/strong><\/p>\n\n\n\n<p>Vue.js \u7684 Quill \u7f16\u8f91\u5668\uff0c\u652f\u6301 SPA \u548c SSR\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/surmon-china\/vue-quill-editor\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; surmon-china\/vue-quill-editor: @quilljs editor component for @vuejs<\/a><\/p>\n\n\n\n<p><strong>16.Vue Stripe Checkout<\/strong><\/p>\n\n\n\n<p>\u7528\u4e8e Stripe \u7ed3\u5e10\u7684 Vue.js \u63d2\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/jofftiquez\/vue-stripe-checkout\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; jofftiquez\/vue-stripe-checkout: A vue plugin for Stripe checkout.<\/a><\/p>\n\n\n\n<p><strong>17.Vue Cleave Component<\/strong><\/p>\n\n\n\n<p>Cleave.js \u7684 Vue.js \u7ec4\u4ef6\uff0c\u7528\u4e8e\u5728\u8f93\u5165\u65f6\u683c\u5f0f\u5316\u8f93\u5165\u5185\u5bb9\uff08\u4fe1\u7528\u5361\u683c\u5f0f\u3001\u65e5\u671f\u7b49\uff09\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/ankurk91\/vue-cleave-component\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; ankurk91\/vue-cleave-component: Vue.js component for Cleave.js<\/a><\/p>\n\n\n\n<p><strong>18.Vuelidate<\/strong><\/p>\n\n\n\n<p>\u8fdb\u884c\u57fa\u4e8e\u6a21\u578b\u7684\u9a8c\u8bc1\uff0c\u5b9e\u73b0\u8868\u5355\u9a8c\u8bc1\u73b0\u5728\u53d8\u5f97\u8f7b\u800c\u6613\u4e3e\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/vuelidate\/vuelidate\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; vuelidate\/vuelidate: Simple, lightweight model-based validation for Vue.js<\/a><\/p>\n\n\n\n<p><strong>19.Vue.js Datepicker<\/strong><\/p>\n\n\n\n<p>\u4e00\u4e2a\u7b80\u5355\u7684 Vue.js \u65e5\u671f\u9009\u62e9\u5668\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/charliekassel\/vuejs-datepicker\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; charliekassel\/vuejs-datepicker: A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations<\/a><\/p>\n\n\n\n<p><strong>20.Vue Moment<\/strong><\/p>\n\n\n\n<p>\u60f3\u8981\u5728 Vue.js \u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528 Moment.js\uff1f\u4f60\u9700\u8981\u8fd9\u4e2a\u5305\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/brockpetrie\/vue-moment\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; brockpetrie\/vue-moment: Handy Moment.js filters for your Vue.js project.<\/a><\/p>\n\n\n\n<p><strong>21.Vue Numeric<\/strong><\/p>\n\n\n\n<p>Vue.js \u8f93\u5165\u5b57\u6bb5\u7ec4\u4ef6\uff0c\u7528\u4e8e\u663e\u793a\u683c\u5f0f\u5316\u7684\u8d27\u5e01\u503c\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/kevinongko\/vue-numeric\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; kevinongko\/vue-numeric: Input field component to display a formatted currency value based on Vue.js<\/a><\/p>\n\n\n\n<p><strong>22.Vue Slider Component<\/strong><\/p>\n\n\n\n<p>\u8fd9\u91cc\u9762\u7684 10 \u79cd\u6ed1\u5757\u7ec4\u4ef6\u90fd\u4f7f\u7528 Vue.js \u5f00\u53d1\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/nightcatsama.github.io\/vue-slider-component\/#\/\" target=\"_blank\" rel=\"noreferrer noopener\">vue-slider-component<\/a><\/p>\n\n\n\n<p><strong>23.Vue.Draggable<\/strong><\/p>\n\n\n\n<p>Vue.js \u7ec4\u4ef6\uff0c\u57fa\u4e8e Sortable.js \u8fdb\u884c\u540c\u6b65\u7684\u62d6\u653e\u6392\u5e8f\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/SortableJS\/Vue.Draggable\" target=\"_blank\" rel=\"noreferrer noopener\">\u300c\u94fe\u63a5\u300d<\/a><\/p>\n\n\n\n<p><strong>24.Vue Draggable Resizable<\/strong><\/p>\n\n\n\n<p>Vue.js \u7ec4\u4ef6\uff0c\u7528\u4e8e\u53ef\u8c03\u6574\u5927\u5c0f\u548c\u53ef\u62d6\u52a8\u7684\u5143\u7d20\uff0c\u6ca1\u6709\u5916\u90e8\u4f9d\u8d56\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/mauricius\/vue-draggable-resizable\" target=\"_blank\" rel=\"noreferrer noopener\">\u300c\u94fe\u63a5\u300d<\/a><\/p>\n\n\n\n<p><strong>25.Vue Color<\/strong><\/p>\n\n\n\n<p>\u6765\u81ea Sketch\u3001Photoshop\u3001Chrom \u7684 Vue.js \u989c\u8272\u9009\u62e9\u5668\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/xiaokaike\/vue-color\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; xiaokaike\/vue-color: Vue Color Pickers for Sketch, Photoshop, Chrome &amp; more http:\/\/vue-color.surge.sh<\/a><\/p>\n\n\n\n<p><strong>26.Emoji Mart Vue<\/strong><\/p>\n\n\n\n<p>\u4ece React \u7684 emoji-mart fork \u51fa\u6765\u7684\uff0c\u7528\u4e8e Vue.js \u7684 Slack \u98ce\u683c\u7684\u53ef\u5b9a\u5236\u8868\u60c5\u7b26\u53f7\u9009\u62e9\u5668\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/jm-david\/emoji-mart-vue\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; jm-david\/emoji-mart-vue: One component to pick them all<\/a><\/p>\n\n\n\n<p><strong>27.Vue YouTube Embed<\/strong><\/p>\n\n\n\n<p>\u57fa\u4e8e Angular YouTube Embed\uff0c\u5141\u8bb8\u4f60\u4f7f\u7528 YouTube iframe API\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/kaorun343\/vue-youtube-embed\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; kaorun343\/vue-youtube-embed: Vue.js and YouTube<\/a><\/p>\n\n\n\n<p><strong>28.Vuetable-2<\/strong><\/p>\n\n\n\n<p>Vue.js \u7684\u6570\u636e\u8868\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/www.vuetable.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vuetable-2<\/a><\/p>\n\n\n\n<p><strong>29.Vue Chartist<\/strong><\/p>\n\n\n\n<p>\u57fa\u4e8e Chartist.js \u7684\u54cd\u5e94\u5f0f\u56fe\u8868\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/Yopadd\/vue-chartist\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; Yopadd\/vue-chartist: Pluging chartist for vuejs<\/a><\/p>\n\n\n\n<p><strong>30.Vue Trend<\/strong><\/p>\n\n\n\n<p>\u6700\u4f18\u96c5\u7684\u8d8b\u52bf\u56fe\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/QingWei-Li\/vue-trend\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; QingWei-Li\/vue-trend: Simple, elegant spark lines for Vue.js<\/a><\/p>\n\n\n\n<p><strong>31.Epic Spinners<\/strong><\/p>\n\n\n\n<p>20 \u4e2a\u6613\u4e8e\u4f7f\u7528\u7684 css \u8c03\u8282\u5668\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/epicmaxco\/epic-spinners\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; epicmaxco\/epic-spinners: Easy to use css spinners collection with vue.js integration<\/a><\/p>\n\n\n\n<p><strong>32.Vue Notification<\/strong><\/p>\n\n\n\n<p>\u7528\u5728 Vue.js \u5e94\u7528\u7a0b\u5e8f\u4e2d\u7684\u6210\u529f\u3001\u8b66\u544a\u548c\u9519\u8bef\u901a\u77e5\u3002\u53ef\u4ee5\u653e\u5728\u53f3\u4fa7\u3001\u5de6\u4fa7\u3001\u5e95\u90e8\u3001\u9876\u90e8\u6216\u4e2d\u95f4\uff0c\u4efb\u4f55\u4f60\u60f3\u8981\u7684\u4f4d\u7f6e\uff01<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"http:\/\/vue-notification.yev.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vue.js Notifications<\/a><\/p>\n\n\n\n<p><strong>33.Vue Popper<\/strong><\/p>\n\n\n\n<p>\u4e00\u4e2a\u57fa\u4e8e popper.js \u7684 Vue.js \u5f39\u51fa\u7a97\u53e3\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/robinck.github.io\/vue-popper\/\" target=\"_blank\" rel=\"noreferrer noopener\">vue-popper | :whale: VueJS popover component based popper.js<\/a><\/p>\n\n\n\n<p><strong>34.Vue Countup<\/strong><\/p>\n\n\n\n<p>\u57fa\u4e8e CountUp.js\uff0c\u53ef\u7528\u4e8e\u521b\u5efa\u663e\u793a\u6570\u5b57\u6570\u636e\u7684\u52a8\u753b\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/xlsdg\/vue-countup-v2\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; xlsdg\/vue-countup-v2: Vue.js component wrap for countUp.js<\/a><\/p>\n\n\n\n<p><strong>35.Vue No SSR<\/strong><\/p>\n\n\n\n<p>\u7528\u4e8e\u5305\u88c5\u5bf9 SSR \u4e0d\u53cb\u597d\u7684\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/egoist\/vue-no-ssr\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; egoist\/vue-no-ssr: Vue component to wrap non SSR friendly components (428 bytes)<\/a><\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Nuxt.js<\/h1>\n\n\n\n<p>Nuxt.js \u662f\u4e00\u4e2a\u57fa\u4e8e Vue.js \u6784\u5efa\u7684\u6846\u67b6\uff0c\u5e2e\u52a9\u4f60\u8f7b\u677e\u6784\u5efa\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n\n\n\n<p><strong>1.Create Nuxt App<\/strong><\/p>\n\n\n\n<p>\u5728\u51e0\u79d2\u949f\u5185\u521b\u5efa Nuxt.js \u9879\u76ee\u7684\u6700\u7b80\u5355\u65b9\u6cd5\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/nuxt\/create-nuxt-app\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; nuxt\/create-nuxt-app: Create Nuxt.js App in seconds.<\/a><\/p>\n\n\n\n<p><strong>2.Nuxt SAAS \u8d44\u6e90\u52a0\u8f7d\u5668<\/strong><\/p>\n\n\n\n<p>\u6bcf\u6b21\u521b\u5efa\u65b0\u6587\u4ef6\u65f6\u4e0d\u9700\u8981\u624b\u52a8\u5bfc\u5165\u6240\u6709\u7684 SASS \u6837\u5f0f\uff0c\u800c\u662f\u8ba9 SASS \u8d44\u6e90\u52a0\u8f7d\u8d1f\u8d23\u8fd9\u4e9b\u5de5\u4f5c\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/anteriovieira\/nuxt-sass-resources-loader\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; anteriovieira\/nuxt-sass-resources-loader: SASS resources (e.g. variables, mixins etc.) module for NuxtJs<\/a><\/p>\n\n\n\n<p><strong>3.Vue Dark Mode<\/strong><\/p>\n\n\n\n<p>\u8fd9\u4e2a\u5e93\u4e5f\u662f\u7528 Nuxt.js \u5f00\u53d1\u7684\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/LeCoupa\/vuedarkmode\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; LeCoupa\/vuedarkmode: \u200d\u200d A minimalist dark design system for Vue.js. Based components designed for the insomniacs who enjoy dark interfaces as much as we do.<\/a><\/p>\n\n\n\n<p><strong>4.Nuxt \u7684 PWA \u6a21\u5757<\/strong><\/p>\n\n\n\n<p>\u7528\u4e8e\u521b\u5efa\u6e10\u8fdb\u5f0f Web \u5e94\u7528\u7a0b\u5e8f\u7684\u6700\u53ef\u9760\u3001\u6700\u7a33\u5b9a\u7684\u6a21\u5757\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/pwa.nuxtjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u26a1 Nuxt PWA<\/a><\/p>\n\n\n\n<p><strong>5.Dotenv \u6a21\u5757<\/strong><\/p>\n\n\n\n<p>\u5c06.env \u6587\u4ef6\u52a0\u8f7d\u5230 Nuxt.js \u5e94\u7528\u7a0b\u5e8f\u4e0a\u4e0b\u6587\u4e2d\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/nuxt-community\/dotenv-module\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; nuxt-community\/dotenv-module: Loads your .env file into your application context<\/a><\/p>\n\n\n\n<p><strong>6.Nuxt.js \u7684 Senty \u6a21\u5757<\/strong><\/p>\n\n\n\n<p>Sentry.io \u662f\u4e00\u4e2a\u5f00\u6e90\u7684\u9519\u8bef\u8ddf\u8e2a\u5668\uff0c\u53ef\u4ee5\u5c06 Sentry \u6dfb\u52a0\u5230 Nuxt.js \u5e94\u7528\u7a0b\u5e8f\u4e2d\u3002<\/p>\n\n\n\n<p>\u5730\u5740\uff1a<a href=\"https:\/\/github.com\/nuxt-community\/sentry-module\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub &#8211; nuxt-community\/sentry-module: Sentry module for NuxtJS<\/a><\/p>\n\n\n\n<p><strong>7. Nuxt.js \u7684 Google Analytics \u6a21\u5757<\/strong><\/p>\n\n\n\n<p>\u5c06\u4f60\u7684 Google Analytics \u5e10\u6237\u4e0e Nuxt \u9879\u76ee\u96c6\u6210\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u65e0\u8bba\u662f\u5f00\u53d1\u65b0\u624b\u8fd8\u662f\u7ecf\u9a8c\u4e30\u5bcc\u7684\u8001\u624b\uff0c\u6211\u4eec\u90fd\u559c\u6b22\u5f00\u6e90\u8f6f\u4ef6\u5305\u3002\u5bf9\u4e8e\u5f00\u53d1\u8005\u6765\u8bf4\uff0c\u5982\u679c\u6ca1\u6709\u8fd9\u4e9b\u5f00\u6e90\u8f6f\u4ef6\u5305\uff0c\u5f88\u96be\u60f3\u8c61\u6211\u4eec\u7684 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":1,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bailicao.com\/index.php\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}