01vue3实战-----前言

1.大前端时代

• 前端
• 移动端iOS/android开发
• 桌面端 window/mac
  常用的electron框架来开发
• 其它平台:穿戴设备、车载系统(智能汽车)、VR、AR…
• web3方向

2.技术栈

• 开发工具 :Visual Studio Code
• 编程语言 :TypeScript4.x+JavaScript(本项目主要用TypeScript)
• 构建工具 :Vite3.x/Webpack5.x(本项目用Vite)
• 前端框架 :Vue3.x+setup
• 路由工具 :Vue Router4.x
• 状态管理 :Vuex4.x/Pinia(本项目用Pinia)
• UI 框架 :Element Plus/ElementUI/AntDesignVue(本项目用Element Plus)
• 可视化 :Echart5.x
• 工具库 :@vueuse/core + dayjs + countup.js等等
• CSS预编译 :Sass/Less
• HTTP工具: Axios
• Git Hook工具 :husky
• 代码规范 :EditorConfig+Prettier+ESLint
• 提交规范 :Commitizen+Commitlint
• 自动部署 :Centos+Jenkins+Nginx

3.项目大致展示

截图1:

截图2:

4.创建Vue项目

4.1 Vue CLI

基于webpack工具；
命令:vue create ‘项目名称’

4.2 create-vue

基于vite工具；
命令：npm init vue@latest

在这里我用第二种方式创建项目(用第一种方式也可以,很多东西大同小异)。

在这里简单解释一下上述的配置。JSX这个在react框架中经常用到,在自己开发组件库时候也可能会用到,这个项目中不太用得到,所以选择否。路由和状态管理工具都是需要的,但这里选择否，后续自己手动配置。
以下是目录结构(目录结构大同小异,随着版本更新目录会发生一些变化):

执行以上命令:

 cd vue3-ts-cms
 npm install
 npm run dev

5.参考资料

注意,该专栏是用于讲述基于vue3+ts的简易实战项目的。通过一个简单的后台管理系统,可以学到vue3+ts的大多数编码规范(与vue2有所不同)。
该专栏大多数内容都是参考B站某个老师的，不用于商业用途。参考链接为:https://www.bilibili.com/video/BV1NDBNYZEZe