vue编写简单两个页面的项目并访问
时间: 2024-09-16 15:00:53 浏览: 32
在Vue.js中创建一个简单的两个页面项目非常直观。首先,你需要安装Vue CLI,这是一个脚手架工具,帮助你快速构建Vue应用。以下是基本步骤:
1. **初始化项目**:
打开终端或命令行,运行`npm install -g @vue/cli` (如果你还没有安装),然后创建一个新的项目:
```
vue create my-project
```
进入项目目录:`cd my-project`
2. **选择预设**: 如果是单页应用,可以选择默认选项。如果你想创建一个多页面应用,可以选中"Manually select features",然后勾选"Pages"。
3. **导航设置**: 在`src/router/index.js`文件中,配置路由规则。例如,你可以添加两个页面:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{ path: '/', component: Home },
{ path: '/page-two', component: PageTwo }
]
export default new Router({
routes
})
// 定义组件
const Home = () => import('@/views/Home.vue')
const PageTwo = () => import('@/views/PageTwo.vue')
```
4. **创建组件**:
在`src/components`文件夹下创建`Home.vue`和`PageTwo.vue`,分别定义这两个页面的内容。
5. **启动项目**:
运行`npm run serve`启动开发服务器,然后在浏览器中输入`http://localhost:8080/`和`http://localhost:8080/page-two`即可访问两个页面。
6. **访问页面**:
点击URL栏中的链接或直接输入地址,你应该能看到Home和PageTwo各自对应的界面。