这是vue3+TS的项目，是一个类似知乎的网站，可以展示专栏和文章的详情，可以登录、注册用户，可以创建、删除、修改文章，可以上传图片等等。

这个项目全部采用Composition API 编写，并且使用了TypeScript，还使用了新版全家桶：路由vue-router、状态管理vuex、脚手架工具vue-cli。

还包括前后端分离开发的难点：

·权限管理：怎样在全局获取用户的权限

·路由规则：针对不同的权限设置路由规则

·全局store结构设计：怎样设计一个复杂合理的store结构

·前端数据缓存设计与实现：怎样防止异步资源的重复发送和浪费

真实的后端环境：告别Mock环境，直接使用线上真实数据。在api.vikingship.xyz/网站中可以看到这个项目中所有需要使用的API，同时表明它们的请求参数，返回和类型。

1、创建项目：

vue3项目首先要保证vue cli是4.5.0以上，可以通过vue --version查看。然后通过vue create 自己起的项目名称，回车即可出现如下，我们选择最后那个即手动选择，因为我们还需要TS的支持

使用空格选择上TS，然后如下点击回车

注意这里选择3版本

2、准备

（1）之前vue2项目用的是vetur插件，现在vue3项目我们禁用掉vetur改为安装volar插件，这里遇到了vscode与它版本兼容的问题，网上有方法，我是直接升级了vscode的版本解决的 

（2）我们使用Bootstrap的样式库

比如，如下我们直接给它添加class="border"就可以有第一个图那种边框，添加class="border-top"就可以有第二个图那种只有上面有边框这样子，我们就不用写css样式了

现在我们来安装它，直接npm install bootstrap@next --save即可安装最新版本

接下来我们就开始敲代码