之前写前端项目基本上都是一个html，然后<script>引入一堆js这样开发，显得非常乱而且也不好维护，于是最近拿之前暑期实训的前端部分同学的代码结合相关官网学习了一下，不过当时的版本是vue-cli3，而我学的时候用的是vue-cli4，导致有些地方踩到了坑，通过阅读文档等解决了问题之后我把几个重要的配置项进行了一下总结，搭建了一个框架，之后就可以按照这个框架去填充具体业务了。但其实目前还有很多不足，比如在路由上并没有鉴权等，也没有规划静态资源的位置等，但是已经可以进行简单的开发了，之后我也会在这个项目的基础上去开发我自己的项目，如果遇到什么问题的话可以再继续分享。
1.创建项目与安装必要依赖
vue create note-front然后选择使用vue3。
该命令会创建一个文件夹note-front，下面保存详细的项目文件，以下的目录都将以note-front下作为根目录说明。
安装依赖需要在该文件夹下启动终端之后进行。
除VUE外项目需要用到以下的依赖，此外，为了支持vue-cli4 的语法，以下的各模块我都使用了最新版本：
- axios 用于请求
- vuex 用于存储状态
- vuex-persistedstate 用于持久化存储状态
- js-cookie 用于操作cookie，这里配合将状态持久化到cookie中
- vue-router 用于路由
npm install vue-router@4.0.11 --save
npm install axios --save
npm install vuex@4.0.2 --save
npm install vuex-persistedstate@4.0.0 --save
npm install js-cookie --save到这里依赖部分就安装完成了。
2.修改app.vue，增加路由显示器
<template><router-view></router-view></template><script>exportdefault{
name:'App',
components:{},
methods:{}}</script><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>3.配置请求
这里进行两次封装，第一次对axios进行封装，设置默认的base_url以及前置处理等信息得到get和post方法，第二次对这两个方法再次进行封装得到api，当需要获取数据的时候，只需要调用api的方法即可。
3.1.对axois的封装
在src文件夹下新建utils文件夹，保存工具类，再在utils文件夹中新建request.js，写入如下内容：
import axiosfrom'axios';const request= axios.create({// 设置路径前缀，使用时所有路径请求时都会增加这个前缀
baseURL:'http://localhost:9003/api',// 设置请求超时时间
timeout:5000});// 请求回复前置处理
request.interceptors.response.use(response=>{// 请求发送后的处理方式，如果code不为0,直接返回错误const res= response.data;if(res.code!==0){alert(res.message);return Promise.reject(res.message);}else{// 否则返回请求所带的负载return res.object;}},error=>{// 请求发送前就失败了的时候的处理方式alert(error.message);return Promise.reject(error);});exportdefault request;//# sourceMappingURL=request.js.map3.2.对request的封装
在src下新建文件夹api存储各个api，这里我们先创建和笔记相关的api，这里在api文件夹下新建note.js，写入如下内容。
// 引入封装的requestimport requestfrom'@/utils/request'// 根据地址获取笔记列表exportfunctiongetNoteList(address){returnrequest({
url:'node/getNodes',
method:'get',
params:{'address': address}})}// 根据address请求笔记详情exportfunctiongetNoteDetail(address){returnrequest({
url:'node/'+ address,
method:'get'})}4.配置状态
由于笔记的列表实际上是一个树状结构，比如当前所在路径为a，在a的分类下有b、c两个文件夹和d文件，如果访问b之后，那么当前所在路径则为a/b，如果不对这个状态进行记录的话，当刷新页面的时候，就会失去对当前路径的追踪，所以需要对路径这一状态进行记录，这里采用vuex的模块方式进行配置。
首先在src下新建一个文件夹store，在store下新建一个文件夹module来存储各个store的模块，另外在store下新建一个文件store.js作为整合各module之后对外暴露的接口。
4.1.笔记相关状态
在module下新建文件夹note，在note下新建action.js、getters.js、mutations.js和index.js，前三项分别代表vuex的重要概念项，index.js对其进行了整合并向外暴露接口。
mutaions.js:
exportconst mutations={SET_LEVEL:(state, level)=>{
state.level= level;}};actions.js:
exportconst actions={};getters.js:
exportconst getters={level:state=> state.level};index.js:
import{ getters}from'./getters';import{ actions}from'./actions';import{ mutations}from'./mutations';exportconst state={
level:['','nginx']};const namespaced=true;exportconst note={
namespaced,
state,
getters,
actions,
mutations};当然之后如果有其他笔记相关状态只需要在这几个js文件添加相应内容即可，或者有新的类型的状态可以在module下面新建新的文件夹来做。
4.2.状态导出
完成这个store的全部内容之后，就可以去完成store下的store.js中的内容了，这里我引入了js-cookie插件，可以将状态持久化到cookie中，如下：
import{ createStore}from'vuex'import Cookiesfrom'js-cookie';import{ note}from'./modules/note';import persistedStatefrom'vuex-persistedstate'const store={
state:{
version:'1.0.0'},
modules:{
note},
plugins:[persistedState({
storage:{getItem:key=> Cookies.get(key),setItem:(key, value)=> Cookies.set(key, value),removeItem:key=> Cookies.remove(key)}})]};exportdefaultnewcreateStore(store);到这里状态相关的内容就结束了。
5.编写页面
这里我们编写两个页面，一个list.vue用来展示在当前的级别下面笔记的列表，一个detail.vue用来展示笔记的详情，最后新建一个notFound.vue用来对错误的请求进行提示，首先在src下新建views文件夹用于保存各页面，这里我只对list.vue和notFound.vue进行展示，因为detail.vue的实际逻辑较为复杂，而且演示的功能基本和list.vue中的重复。
5.1.笔记列表页面
在views下新建list.vue，写入如下内容：
<template><divclass="text-align:left">当前所在位置:{{levels}}</div><div><table><trclass="item"v-for="node in nodes":key="node.name"><td>
{{node.dir?'文件夹':'文件'}}</td><td>
{{node.name}}</td></tr></table></div></template><script>import{ getNoteList}from"@/api/note"exportdefault{
name:'list',data(){return{
nodes:[{"address":"/nginx/负载均衡实现.md","dir":false,"name":"负载均衡实现.md"},{"address":"/nginx/url.txt","dir":false,"name":"url.txt"},{"address":"/nginx/note.md","dir":false,"name":"note.md"},{"address":"/nginx/test","dir":true,"name":"test"}],}},
computed:{levels(){// console.log(this.$store.state.note.level)var levels=this.$store.state.note.level;return levels.length==1?'/':levels.join("/");}},created(){var that=this;getNoteList(this.levels).then(res=>{
that.nodes= res;
console.log(that.nodes)})}}</script><styletype="text/css"></style>这里我向后台请求了笔记列表，返回格式如下：
{"code":0,"message":"success","object":[{"address":"负载均衡实现.md","dir":false,"name":"负载均衡实现.md"},{"address":"url.txt","dir":false,"name":"url.txt"},{"address":"note.md","dir":false,"name":"note.md"}]}5.2.notFound页面
在views下新建notFound.vue，写入如下内容：
<template><div><h1>找不到您要的内容了。。</h1></div></template><script>exportdefault{
name:'notFound',data(){return{}}}</script><styletype="text/css"></style>6.配置路由
在src下新建router文件夹，在其下新建router.js，在其中配置路由表，这里我们假设会创建两个页面list.vue和detail.vue，分别代表笔记列表和笔记详情，默认展示list.vue。
import{createRouter, createWebHistory}from"vue-router";const constantRouterMap=[{
path:'',component:()=>import('@/views/list.vue')},{
path:'/list',
name:'list',component:()=>import('@/views/list.vue')},// 这里在访问/detail/13的时候就会访问detail.vue，并且传入参数13{
path:'/detail/:id',component:()=>import('@/views/detail.vue')},// 404信息页面展示{
path:'/:pathMatch(.*)*',
name:'NotFound',component:()=>import('@/views/notFound.vue')}]exportdefaultnewcreateRouter({
history:createWebHistory(),
routes: constantRouterMap});7.配置main.js
我们配置了这么多东西，就是为了把他们运用在Vue的根节点上，这里用如下的代码来把store、router等应用进来：
import{ createApp}from'vue'import Appfrom'./App.vue'import routerfrom'./router/router';import storefrom'./store/store';const app=createApp(App)
app.use(router)
app.use(store)
app.mount('#app')8.启动与效果查看
在根目录(即note-front)下使用如下命令启动整个项目：
npm run serve访问localhost:8080可以看到如下的页面，即我们的笔记列表，并且状态也成功的读取到了。
如果访问一个不存在的url，比如localhost:8080/test，则可以看到notFound.vue的效果。
