将这段代码转成vue的主页源码应该怎么转换放在哪个文件夹下还需要哪些js和路由：1在 src 目录下新建 views 文件夹新建 Homevue 页面组件2 在 Homevue 中添加这个静态页面的 HTML 内容3 抽取页面中的可复用组件比如导航栏到 components 文件夹4 在 Appvue 中使用路由并渲染 Home 页面组件5indexhtml中写什么放在哪个路径其他你接着补充给
步骤如下：
- 在src目录下新建views文件夹，并在该文件夹下新建Home.vue文件。
- 在Home.vue中添加以下代码：
<template>
<div>
<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">
<router-link to="/" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/zone" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/funnel" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/help" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</router-link>
</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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
<style>
/* 这里放置样式 */
</style>
- 在src目录下新建components文件夹，并在该文件夹下新建Navbar.vue文件。
- 在Navbar.vue中添加以下代码：
<template>
<div>
<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">
<router-link to="/" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Dashboard</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/zone" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Checkout Zones</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/funnel" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Funnels</span>
</span>
</router-link>
</div>
<div class="Polaris-ButtonGroup__Item">
<router-link to="/help" class="Polaris-Button">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">Help Center</span>
</span>
</router-link>
</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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Navbar',
};
</script>
<style>
/* 这里放置样式 */
</style>
- 在App.vue中添加以下代码：
<template>
<div id="app">
<Navbar></Navbar>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from './components/Navbar.vue';
export default {
name: 'App',
components: {
Navbar,
},
};
</script>
<style>
/* 这里放置样式 */
</style>
- 在src目录下新建router文件夹，并在该文件夹下新建index.js文件。
- 在index.js中添加以下代码：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
- 在src目录下的main.js中添加以下代码：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
- 在public目录下的index.html中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Funnels</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- 在src目录下的assets目录中放置style.css和layui/css/layui.css文件。
- 在src目录下的app/js目录中放置global.js文件。
- 将原有的jQuery和脚本代码放置在src目录下的main.js中的
new Vue之前。
至此，你需要的具体步骤和代码都已补充完毕
原文地址: https://www.cveoy.top/t/topic/im0b 著作权归作者所有。请勿转载和采集!