配置一个vue3.0项目的完整步骤

此时的目录结构如下：

|-book
 |-babel.config.js
 |-package.json
 |-public
 | |-favicon.ico
 | |-index.html
 |-README.md
 |-src
 | |-api
 | |-App.vue
 | |-assets
 | | |-logo.png
 | |-components
 | | |-HelloWorld.vue
 | |-main.js
 | |-router
 | |-store
 | | |-index.js
 | |-utils
 | |-views
 |-yarn.lock

3.项目介绍

我们要讲解vue的使用，总的拿个项目练手。我就做一回产品经理，虚拟一个图书管理项目吧。我们有2个页面。分别如下

登录页 ，用户输入账号admin和密码admin，就跳转到我们的首页
首页，显示一些图书信息（我为了省事就不显示了）。

这个项目会涉及到那些操作呢：

点击跳转
请求
展示

因此处理，vue提供给我们的组件外，我们还需要手动添加一下这些组件

路由组件：vue-router
请求组件：axios mock
ui组件：element-ui sass
表单验证组件：vee-validate
状态：vuex js-cookie

好了现在我们根据我们的需求，一步步开发我们的页面。

4. 开发项目

4.1 登录页

在views文件夹下新建Login.vue、Index.vue 。这三个页面的代码大同小异，目前只是基本的代码，稍后还要修改。

<template>
 <!-- 这是login页面 -->
 <div>这里是login 页面</div>
 <!-- 这是index页面 -->
 <div>这里是index 页面</div>
</template>
<style>
</style>
<script>
export default {
 name: 'Login',
 data() {
 return {
 }
 },
}
</script>

修改src目录下的App.vue 文件。删掉#app文件里的内容，改为<router-view>，这里就是以为显示其他组件的地方。删除script中的内容。修改后的App.vue代码如下：

<template>
 <div id="app">
 <router-view></router-view>
 </div>
</template>
<style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

5.vue-router

使用vue开发任何一个项目都涉及都路由，所以我们先讲解路由。这里需要安装的组件是vue-router

D:testbook>yarn add vue-router

在我们刚刚新建的router文件夹下新建index.js文件，程序如下