上一篇文章我们讲了《前端开发从零搭建VUE后台》，还没有查看的同学可以去查看一下。
这是我们的基础文章，接下来的我们将继续讲解。
上一篇我们已经搭建了基础vue3，今天我们来安装一下我们在项目可能使用到的插件。
安装以下插件
# cookie插件，后期会用来存储数据
yarn add js-cookie --save
# 进度条插件（此插件可以不用，使用它只是为了提升用户体验）
yarn add nprogress --save
# 这个不用多说，大家应该都知道（也可以用less，不做强求）
yarn add sass --save
# 路由插件
yarn add vue-router --save
# 状态(其实还有其他的很多类似的插件，不过这个是官方推荐的，所以大家就用呗)
# 这个地方需要说明一下，不是每个项目都需要用这个的插件的。如果你只是一个很小的项目的话，
# 可以不用使用这个插件的，那样会给自己添加更多麻烦的。
yarn add vuex --save
好了，以上就是我们要使用的基础插件。等在后期使用中我们在添加自己需要的插件。
正式开始开始正文之前，我们先来看看基础的目录结构吧。（目录机构不做强制要求，可以根据项目需要进行调整）
大家可能对这些目录还是有很多疑问。我想说的是，大家先保留疑问，大家先按照我的目录结构来。通过实践，我相信大家肯定能自己找到答案的。
下面我们先从主文件开始说起吧：
main.js
# 最开始的main.js(这个看起来是不是比vue2更简洁了)
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
#下面我们需要对这个文件进行改造。
#首先是引人我们需要的插件
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' // 进度条样式
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/dist/index.css'
import jsCookie from 'js-cookie'
import App from './App.vue'
import router from './router';
import store from './store';
NProgress.configure({ showSpinner: false })
const app = createApp(App);
// 使用库
app.use(ElementPlus, {
locale: zhCn
});
app.use(jsCookie);
app.use(store);
app.use(router);
//路由结束进度条
router.afterEach(() => {
NProgress.done();
})
app.mount('#app');
到这里，main.js就改造完成了。这个时候大家运行起来感觉没有啥变化呀。对的是没有啥变化，我们只是加了一个简单插件而已额。
我们继续，下面我们打开我们今天最最重要的主角了。
App.vue
# 这个是大家看到的最原始代码。
# 这个是一个最最简单的例子。这个页面我们要大改造一下
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 Vite" />
</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>
# 下面我们需要改造这个页面。可能很多同学很好奇，我们需要改造啥呀。用这个页面干啥呀
# 这个问题是很多初次学习vue同学的疑问，这很正常。我在这里和大家说一下吧，因为我们要
# 做单也的应用，所以这个页面一般都是被我们用来展示对应的路由组件的。可能有同学要问了，
# 我们需要咋展现了。这个就是我们下面要做的事情了。
# 下面我们就要用到我们之前提到的一个很重要的路由插件了
# 在vue-router的插件中有一个router-view，来帮我们处理这里展示的事情。下面我们来看看
# 具体的代码
<template>
<router-view />
</template>
<style scoped lang="scss">
</style>
# 大家看了是不是感觉很简单。（目前我们按照最简单的方式来处理）
现在主组件已经被我们改造完成了。大家肯定就很好奇，接下来我们干啥。其实这个时候我们已经完成了主体的展示容器了。下面我们就只是添加对应的页面组件就可以了。
感谢大家，因为篇幅有限，我们今天先到这里。下一篇开始和大家一起编写具体的页面组件了，做一些大家能够立即能看到的东西。～～
