这是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即可安装最新版本
接下来我们就开始敲代码