• 日期: 2024-09-11
  • 标签: 常规
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="layui/css/layui.css"><title>Funnels</title></head><body><div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;"><div class="Polaris-Stack__Item"><div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter"><div class="Polaris-Stack__Item"><div class="sc-1ibht3l-0 uqRZq"></div><div class="sc-1ibht3l-1 hIZedH"><div class="Polaris-ButtonGroup"><div class="Polaris-ButtonGroup__Item"><a data-polaris-unstyled="true" class="Polaris-Button" href="index.html"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Dashboard</span></span></a></div><div class="Polaris-ButtonGroup__Item"><a data-polaris-unstyled="true" class="Polaris-Button" href="zone.html"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Checkout Zones</span></span></a></div><div class="Polaris-ButtonGroup__Item"><a data-polaris-unstyled="true" class="Polaris-Button" href="funnel.html"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Funnels</span></span></a></div><div class="Polaris-ButtonGroup__Item"><a data-polaris-unstyled="true" class="Polaris-Button" href="help.html"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Help Center</span></span></a></div><div class="Polaris-ButtonGroup__Item"><div><button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">More</span><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path></svg></span></span></span><div id="dropdownContent" class="dropdown-content"><a href="payment.html">Payment</a><a href="facebookPixel.html">Pixel</a></div></button></div></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script type="text/javascript" src="https://uzi666.top/shopline_admin_statuc/css/layui/layui.js" charset="utf-8"></script><script type="text/javascript" src="app/js/global.js" charset="utf-8"></script><script>$(document).ready(function() {$("#moreSeting").click(function(e) {e.stopPropagation();var dropdown = $("#dropdownContent");dropdown.toggle();});$(document).click(function(e) {var dropdown = $("#dropdownContent");if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {dropdown.hide();}});});</script></body></html>1. 在 src 目录下新建 views 文件夹，并在该文件夹下新建 Home.vue 页面组件：
<p>在 views 文件夹下创建 Home.vue 文件，文件内容如下：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div&gt;
    &lt;div class=&quot;Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter&quot; style=&quot;margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;&quot;&gt;
      &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
        &lt;div class=&quot;Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter&quot;&gt;
          &lt;div class=&quot;Polaris-Stack__Item&quot;&gt;
            &lt;div class=&quot;sc-1ibht3l-0 uqRZq&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;sc-1ibht3l-1 hIZedH&quot;&gt;
              &lt;div class=&quot;Polaris-ButtonGroup&quot;&gt;
                &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                  &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;index.html&quot;&gt;
                    &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                      &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Dashboard&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                  &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;zone.html&quot;&gt;
                    &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                      &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Checkout Zones&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                  &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;funnel.html&quot;&gt;
                    &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                      &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Funnels&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                  &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; href=&quot;help.html&quot;&gt;
                    &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                      &lt;span class=&quot;Polaris-Button__Text&quot;&gt;Help Center&lt;/span&gt;
                    &lt;/span&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;div class=&quot;Polaris-ButtonGroup__Item&quot;&gt;
                  &lt;div&gt;
                    &lt;button type=&quot;button&quot; id=&quot;moreSeting&quot; class=&quot;Polaris-Button&quot; tabindex=&quot;0&quot; aria-controls=&quot;Popover486&quot; aria-owns=&quot;Popover486&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                      &lt;span class=&quot;Polaris-Button__Content&quot;&gt;
                        &lt;span class=&quot;Polaris-Button__Text&quot;&gt;More&lt;/span&gt;
                        &lt;span class=&quot;Polaris-Button__Icon&quot;&gt;
                          &lt;span class=&quot;Polaris-Icon&quot;&gt;
                            &lt;svg viewBox=&quot;0 0 20 20&quot; class=&quot;Polaris-Icon__Svg&quot; focusable=&quot;false&quot; aria-hidden=&quot;true&quot;&gt;
                              &lt;path d=&quot;M5 8l5 5 5-5z&quot; fill-rule=&quot;evenodd&quot;&gt;&lt;/path&gt;
                            &lt;/svg&gt;
                          &lt;/span&gt;
                        &lt;/span&gt;
                      &lt;/span&gt;
                      &lt;div id=&quot;dropdownContent&quot; class=&quot;dropdown-content&quot;&gt;
                        &lt;!-- 这里放下拉列表的内容 --&gt;
                        &lt;a href=&quot;payment.html&quot;&gt;Payment&lt;/a&gt;
                        &lt;a href=&quot;facebookPixel.html&quot;&gt;Pixel&lt;/a&gt;
                      &lt;/div&gt;
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;Home&quot;,
};
&lt;/script&gt;

&lt;style&gt;
/* 样式内容省略，将原样式内容拷贝到这里 */
&lt;/style&gt;
</code></pre>
<ol start="2">
<li>抽取页面中的可复用组件，比如导航栏到 components 文件夹中：
在 src/components 文件夹下创建 Navbar.vue 文件，文件内容如下：</li>
</ol>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div&gt;
    &lt;!-- 导航栏的 HTML 内容 --&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;Navbar&quot;,
};
&lt;/script&gt;

&lt;style&gt;
/* 样式内容省略，将原样式内容拷贝到这里 */
&lt;/style&gt;
</code></pre>
<ol start="3">
<li>在 App.vue 中使用路由并渲染 Home 页面组件：
修改 src/App.vue 文件，文件内容如下：</li>
</ol>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;App&quot;,
};
&lt;/script&gt;

&lt;style&gt;
/* 样式内容省略，将原样式内容拷贝到这里 */
&lt;/style&gt;
</code></pre>
<ol start="4">
<li>在 router/index.js 中配置路由：
在 src/router/index.js 文件中添加路由配置，文件内容如下：</li>
</ol>
<pre><code class="language-javascript">import Vue from &quot;vue&quot;;
import VueRouter from &quot;vue-router&quot;;
import Home from &quot;../views/Home.vue&quot;;

Vue.use(VueRouter);

const routes = [
  {
    path: &quot;/&quot;,
    name: &quot;Home&quot;,
    component: Home,
  },
];

const router = new VueRouter({
  mode: &quot;history&quot;,
  base: process.env.BASE_URL,
  routes,
});

export default router;
</code></pre>
<ol start="5">
<li>在 main.js 中引入路由和创建 Vue 实例：
在 src/main.js 文件中添加路由和创建 Vue 实例的代码，文件内容如下：</li>
</ol>
<pre><code class="language-javascript">import Vue from &quot;vue&quot;;
import App from &quot;./App.vue&quot;;
import router from &quot;./router&quot;;

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) =&gt; h(App),
}).$mount(&quot;#app&quot;);
</code></pre>
<p>至此，将原始代码转换为 Vue 的主页源码完成。</p>
将静态 HTML 页面转换为 Vue 主页源码

原文地址: https://www.cveoy.top/t/topic/p4Zz 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录