vue多页开发项目搭建
时间: 2023-07-26 10:48:58 浏览: 45
好的,针对您的问题,我可以提供以下步骤:
1. 创建一个项目文件夹,例如:my-project
2. 在项目文件夹内创建一个 public 文件夹和一个 src 文件夹
3. 在 public 文件夹中创建一个 index.html 文件,并添加以下代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/js/app.js"></script>
</body>
</html>
```
4. 在 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')
```
5. 在 src 文件夹中创建一个 App.vue 文件,并添加以下代码:
```
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
```
6. 在 src 文件夹中创建一个 router 文件夹,并在其中创建一个 index.js 文件,并添加以下代码:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
7. 在 src 文件夹中创建一个 views 文件夹,并在其中创建 Home.vue 和 About.vue 文件,分别添加以下代码:
Home.vue:
```
<template>
<div>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
```
About.vue:
```
<template>
<div>
<h1>About</h1>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
```
8. 在 package.json 文件中添加以下代码:
```
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
```
9. 在命令行中进入 my-project 文件夹,并运行以下命令:
```
npm install vue-router --save
```
10. 运行以下命令启动项目:
```
npm run serve
```
以上就是一个简单的多页应用项目搭建过程,您可以根据自己的需求进行修改和添加。希望能对您有所帮助。