<p><code></p> <h2 id="articleHeader0">项目源码地址</h2> <p>链接地址(<a href="https://github.com/cxp1539/vue-as-miniapp)" rel="nofollow noreferrer" target="_blank">https://github.com/cxp1539/vu...</a></p> <h2 id="articleHeader1">关于</h2> <p>主要作用是实现以类似<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js文件的方式编写小程序(将模板、JS、样式写在一个文件中),这种组织方式比较方便,而且一目了然</p> <p>该项目只是简单生成了<a href="http://www.js-code.com/tag/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f" title="微信小程序" target="_blank">微信小程序</a>quickstart的案例,另外增加了配置定义,和工具方法。供大家参考学习。模版,组件等更多功能可以在该项目webpack入口文件进行修改 自定义增加的功能</p> <p>模版使用的是pug,css使用的sass 当然这个可以自定义</p> <p>比如你想用 pug,那么在 template 标签中加入 <code>lang="pug"</code> 并执行 <code>npm install -S pug</code>即可,如果想使用更多模版语法,请搜索consolidate支持的模版语法。</p> <p>比如你想用 sass,那么在 style 标签中加入 <code>lang="sass"</code> 前提要按照支持的loader,并在webpack进行配置</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>该项目mina loader使用的wechat-mini-loader是我基于wechat-mina-loader基础上做了些更改增加了对json标签的解析和输出配置文件,使用方式跟wechat-mina-loader完全一致。</p> <h2 id="articleHeader2">安装</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="git clone 该项目" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs bash"><code style="word-break: break-word; white-space: initial;">git <span class="hljs-built_in">clone</span> 该项目</code></pre> <h2 id="articleHeader3">使用方式</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run build</code></pre> <p>将 <code>project.config.js</code> 文件中appid改成你项目对应的appid,在微信开发工具引入dist目录即可</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25328.html