01vue3实战-----前言
- 1.大前端时代
- 2.技术栈
- 3.项目大致展示
- 4.创建Vue项目
- 4.1Vue CLI
- 4.2create-vue
- 5.参考资料
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.1Vue CLI
基于webpack工具；
命令:vue create ‘项目名称’
4.2create-vue
基于vite工具；
命令：npm init vue@latest
在这里我用第二种方式创建项目(用第一种方式也可以,很多东西大同小异)。
在这里简单解释一下上述的配置。JSX这个在react框架中经常用到,在自己开发组件库时候也可能会用到,这个项目中不太用得到,所以选择否。路由和状态管理工具都是需要的,但这里选择否，后续自己手动配置。
以下是目录结构(目录结构大同小异,随着版本更新目录会发生一些变化):
执行以上命令:
cd vue3-ts-cmsnpm installnpm run dev
5.参考资料
注意,该专栏是用于讲述基于vue3+ts的简易实战项目的。通过一个简单的后台管理系统,可以学到vue3+ts的大多数编码规范(与vue2有所不同)。
该专栏大多数内容都是参考B站某个老师的，不用于商业用途。参考链接为:https://www.bilibili.com/video/BV1NDBNYZEZe
)
