Vue项目结构
初识Vue项目结构
我们打开命令行窗口，cmd。启动vue的界面。
vue ui
一般都会自己弹出来浏览器，没有的话自己手动访问 localhost:8000 即可。
都是中文的，大家可以自己根据提示创建新的项目。（现在的前端都这么炫酷了吗。）
项目完成后如何启动项目，在右边栏->任务 ->serve->运行
两个地址都是可以访问的，下面那个在手机端也可以访问噢，不过要同个局域网，也就是同个WiFi。
可以在这里直接点击编辑器打开，也可以去硬盘找到你的项目存放目录，用编辑器打开。我使用的是vs code，实际上idea也是可以编辑的，不过需要一些简单的配置，安装一个叫vue的插件，设置为ES6。
下面我们去看vue项目结构。
注意：Book.vue是我测试的时候加上的。
App.vue是个什么玩意呢，就是我们的访问项目时映入眼帘的首页。
红色款里面估计就是对应我们的导航栏了，我在这里加了个Book，我如何访问到/book这个网址呢，
很明显我需要在某个地方配置一个映射地址，在此之前我们先去views目录写Book.vue页面。
<template>
<div>
<img alt="Vue logo" src="../assets/logo.png" />
<table class="book">
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="(item,index) in books" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
<hr />
{{msg}}
</div>
</template>
<style >
.book {
text-align: center;
margin: auto;
}
</style>
<script>
export default {
name: "Book",
data() {
return {
msg: "Hello Vue",
books: [
{
id: 1,
name: "Java",
author: "大佬"
},
{
id: 2,
name: "Python",
author: "大哥"
}
]
};
}
};
</script>接下去我们去做一个映射，让Book.vue映射为/book，导航栏那里只是一个展示。
我们来到router目录中的index.js，可以看到这里面实际就是写我们的映射路径了。
我们将/views/Book.vue这个页面导入。
import Book from '../views/Book.vue'在下面配置路径的地方加入，在const routes = {} 中。
{
path: '/book',
component: Book
}这样子就完事了，我们去编译启动项目，点击导航栏上的Book。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读