脚本宝典收集整理的这篇文章主要介绍了

使用 Parcel 构建 Vue.js 项目

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote><p>Parcel 是一款 Web 应用打包工具,与 Webpack 相比,最大的特点就是极速零配置。</p> <p>因为使用 <code>npm</code> 会出现莫名其妙的安装失败问题,所以这里使用 <code>yarn</code> 管理依赖。</p> </blockquote> <h2 id="articleHeader0">初始化项目</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="yarn init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">yarn init</code></pre> <h2 id="articleHeader1">安装依赖</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="yarn add parcel-bundler --dev yarn add vue vue-router" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">yarn add parcel-bundler --dev yarn add vue vue-router</code></pre> <h2 id="articleHeader2">项目目录</h2> <p>与 <code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> CLI 3</code> 构建的目录大致相同。</p> <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="├── public │ └── index.html ├── src │ ├── components │ │ ├── componentA.vue │ │ └── componentB.vue │ ├── App.vue │ ├── main.js │ └── router.js ├── package.json " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code>├── <span class="hljs-selector-tag">public</span> │ └── <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span> ├── <span class="hljs-selector-tag">src</span> │ ├── <span class="hljs-selector-tag">components</span> │ │ ├── <span class="hljs-selector-tag">componentA</span><span class="hljs-selector-class">.vue</span> │ │ └── <span class="hljs-selector-tag">componentB</span><span class="hljs-selector-class">.vue</span> │ ├── <span class="hljs-selector-tag">App</span><span class="hljs-selector-class">.vue</span> │ ├── <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span> │ └── <span class="hljs-selector-tag">router</span><span class="hljs-selector-class">.js</span> ├── <span class="hljs-selector-tag">package</span><span class="hljs-selector-class">.json</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="// main.js import Vue from 'vue'; import App from './App.vue'; import router from './router' new Vue({ el: '#app', router, render: h => h(App),<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">// main.js</span> <span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>; <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>; <span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, router, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App), });</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="<!-- public/index.html --><br /> <!-- 引入 main.js --></p> <p><!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;><br /> <title>parcel-vue</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;></div> <p> <script src=&quot;../src/main.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-comment">&lt;!-- public/index.html --&gt;</span> <span class="hljs-comment">&lt;!-- 引入 main.js --&gt;</span> <span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>parcel-vue<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../src/main.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>由于我是局部安装 Parcel,所以要执行 parcel 命令需要在 <code>package.json</code> 添加执行脚本。</p> <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="{ &quot;name&quot;: &quot;parcel-vue&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;main&quot;: &quot;public/index.html&quot;, &quot;scripts&quot;: { &quot;dev&quot;: &quot;parcel public/index.html&quot;, &quot;build&quot;: &quot;rm -rf dist &amp;&amp; parcel build public/index.html --public-url ./&quot; }, &quot;devDependencies&quot;: { &quot;@vue/component-compiler-utils&quot;: &quot;^2.6.0&quot;, &quot;parcel-bundler&quot;: &quot;^1.12.1&quot;, &quot;vue-template-compiler&quot;: &quot;^2.6.8&quot; }, &quot;dependencies&quot;: { &quot;vue&quot;: &quot;^2.6.10&quot;, &quot;vue-hot-reload-api&quot;: &quot;^2.3.3&quot;, &quot;vue-router&quot;: &quot;^3.0.2&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"name"</span>: <span class="hljs-string">"parcel-vue"</span>, <span class="hljs-attr">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-attr">"main"</span>: <span class="hljs-string">"public/index.html"</span>, <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"dev"</span>: <span class="hljs-string">"parcel public/index.html"</span>, <span class="hljs-attr">"build"</span>: <span class="hljs-string">"rm -rf dist &amp;&amp; parcel build public/index.html --public-url ./"</span> }, <span class="hljs-attr">"devDependencies"</span>: { <span class="hljs-attr">"@vue/component-compiler-utils"</span>: <span class="hljs-string">"^2.6.0"</span>, <span class="hljs-attr">"parcel-bundler"</span>: <span class="hljs-string">"^1.12.1"</span>, <span class="hljs-attr">"vue-template-compiler"</span>: <span class="hljs-string">"^2.6.8"</span> }, <span class="hljs-attr">"dependencies"</span>: { <span class="hljs-attr">"vue"</span>: <span class="hljs-string">"^2.6.10"</span>, <span class="hljs-attr">"vue-hot-reload-api"</span>: <span class="hljs-string">"^2.3.3"</span>, <span class="hljs-attr">"vue-router"</span>: <span class="hljs-string">"^3.0.2"</span> } }</code></pre> <h2 id="articleHeader3">执行构建</h2> <p>启动开发服务器:</p> <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="yarn run dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">yarn run dev</code></pre> <p>项目打包构建:</p> <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="yarn run build" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">yarn run build</code></pre> <h2 id="articleHeader4">最后</h2> <p>Parcel 从 v1.7.0 开始添加对 <code>.vue</code> 文件的支持,所以现在构建 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 项目几乎就是零配置,非常方便。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

使用 Parcel 构建 Vue.js 项目

全部内容,希望文章能够帮你解决

使用 Parcel 构建 Vue.js 项目

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过