<p><code></p> <p><code>parcel</code>一个快速,零配置的 Web 应用程序打包工具,这里我介绍下如何和<code>vue</code>结合进行开发,强烈建议<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>8</code>以上,具体代码:<a href="https://github.com/zlxbuzz/parcel-demo" rel="nofollow noreferrer" target="_blank">https://github.com/zlxbuzz/pa...</a></p> <h4>初始化项目</h4> <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="mkdir parcel-demo &amp;&amp; cd parcel-demo &amp;&amp; yarn init -y " title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">mkdir parcel-demo &amp;&amp; <span class="hljs-built_in">cd</span> parcel-demo &amp;&amp; yarn init -y </code></pre> <h4>安装依赖</h4> <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 parcel-plugin-vue babel-preset-env less --dev yarn add vue-router" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash">yarn add parcel-bundler parcel-plugin-vue <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-preset-env less --dev yarn add vue-router</code></pre> <p>其中<code>parcel-bundler</code>是主要的工具,对于<code>vue</code>结尾的单文件,需要单独处理文件类型,<br /><code>parcel-plugin-vue</code>这个插件会通过<code>vueify</code>来生成对应的代码,<code>parcel</code>会自动加载<code>parcel-plugin</code>开头的依赖。</p> <h4>在根目录添加<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>,postcss配置</h4> <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="//postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ browsers: [ 'last 20 versions', 'IE 9', 'iOS >= 8']})]<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//postcss.config.js</span> <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { plugins: [ <span class="hljs-built_in">require</span>(<span class="hljs-string">'autoprefixer'</span>)({ browsers: [ <span class="hljs-string">'last 20 versions'</span>, <span class="hljs-string">'IE 9'</span>, <span class="hljs-string">'iOS &gt;= 8'</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="//.babelrc { &quot;presets&quot;: [ [&quot;env&quot;] ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs cs"><code><span class="hljs-comment">//.babelrc</span> { <span class="hljs-string">"presets"</span>: [ [<span class="hljs-meta"><span class="hljs-meta-string">"env"</span></span>] ] }</code></pre> <h4>新建html</h4> <p>这里引用了<code>mint</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="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <meta name=viewport content=&quot;width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1&quot;><br /> <title>parcel-vue-demo</title><br /> <!-- 引入样式 --> <link rel=&quot;stylesheet&quot; href=&quot;https://cdn.bootcss.com/mint-ui/2.2.13/style.css&quot;> <p> <script src=&quot;https://cdn.bootcss.com/vue/2.5.9/vue.min.js&quot;></script><br /> <!-- 引入组件库 --><br /> <script src=&quot;https://cdn.bootcss.com/mint-ui/2.2.13/index.js&quot;></script><br /> </head><br /> <body><br /> <app></app><br /> <script src=&quot;./src/index.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-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</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,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>parcel-vue-demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-comment">&lt;!-- 引入样式 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.bootcss.com/mint-ui/2.2.13/style.css"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/vue/2.5.9/vue.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-comment">&lt;!-- 引入组件库 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/mint-ui/2.2.13/index.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">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">app</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">app</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/index.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> <h4>开发</h4> <p>和基于webpack开发的目录结构一致,具体代码可以参考 <a href="https://github.com/zlxbuzz/parcel-demo" rel="nofollow noreferrer" target="_blank">https://github.com/zlxbuzz/pa...</a></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="src ├── app.vue ├── index.js ├── index.less ├── router.js └── views ├── detail.vue └── index.vue" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">src ├── app.vue ├── index.js ├── index.less ├── router.js └── views ├── detail.vue └── index.vue</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="//index.js import app from './app.vue' import router from './router' import './index.less' window.onload = function(){ new Vue({ router, el: 'app', components: { app } }); }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">//index.js</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">import</span> <span class="hljs-string">'./index.less'</span> <span class="hljs-built_in">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ router, <span class="hljs-attr">el</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">components</span>: { app } }); }</code></pre> <h4>添加脚本</h4> <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;h5&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;main&quot;: &quot;index.js&quot;, &quot;license&quot;: &quot;MIT&quot;, &quot;scripts&quot;: { &quot;dev&quot;: &quot;parcel index.html&quot;, &quot;build&quot;: &quot;parcel build index.html --public-url /&quot; }, &quot;devDependencies&quot;: { &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;, &quot;less&quot;: &quot;^2.7.3&quot;, &quot;parcel-bundler&quot;: &quot;^1.2.0&quot;, &quot;parcel-plugin-vue&quot;: &quot;^1.0.1&quot; }, &quot;dependencies&quot;: { &quot;vue-router&quot;: &quot;^3.0.1&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">{ <span class="hljs-string">"name"</span>: <span class="hljs-string">"h5"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-string">"main"</span>: <span class="hljs-string">"index.js"</span>, <span class="hljs-string">"license"</span>: <span class="hljs-string">"MIT"</span>, <span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"dev"</span>: <span class="hljs-string">"parcel index.html"</span>, <span class="hljs-string">"build"</span>: <span class="hljs-string">"parcel build index.html --public-url /"</span> }, <span class="hljs-string">"devDependencies"</span>: { <span class="hljs-string">"babel-preset-env"</span>: <span class="hljs-string">"^1.6.1"</span>, <span class="hljs-string">"less"</span>: <span class="hljs-string">"^2.7.3"</span>, <span class="hljs-string">"parcel-bundler"</span>: <span class="hljs-string">"^1.2.0"</span>, <span class="hljs-string">"parcel-plugin-vue"</span>: <span class="hljs-string">"^1.0.1"</span> }, <span class="hljs-string">"dependencies"</span>: { <span class="hljs-string">"vue-router"</span>: <span class="hljs-string">"^3.0.1"</span> } }</code></pre> <p>只需要执行<code>npm run dev</code> 和 <code>npm run build</code> 就可以进行开发和构建,<code>public-url</code>就相当于资源的引用路径。</p> <p></code></p>

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