1、项目创建前准备
- 1.1、 开发工具VSCode（推荐），WebStorm.
- 1.2、 安装Node，建议安装16.0以上版本，node版本地址nodejs.org/zh-cn/downl…也可以使用nvm进行node版本管理.
- 1.3、 vscode必要插件，Volar，Eslint，Prettier - Code formatter，(项目代码规范)
2、项目创建
- 2.1、创建Vue项目，通过vue官网,使用脚手架工具npm init vue@latest搭建vue脚手架项目。
3、项目创建步骤:
- Project name: < 项目名称 >
- Add TypeScript: < 是否使用TypeScript >
- Add JSX Support: < 是否使用JSX语法 >
- Add Vue Router for Single Page Application development?: < 是否添加路由 >
- Add Pinia for state management?: < 是否开启Pinna（vue官方推荐状态管理器，和vuex雷同） >
- Add Vitest for Unit testing?: < 是否开启单元测试 >
- Add an End-to-End Testing Solution?: < 是否开启端到端测试 >
- Add ESLint for code quality?: < 是否添加ESlint校验规则 >
- Add Prettier for code formatting?: < 是否添加Perttier进行代码格式化 >
注: Eslint与Prettier可以不添加，可后续自行按需求配置
4、项目启动
- 进入到项目文件夹安装依赖后启动项目
5、项目结构文件
- node_modules：通过 npm install 下载安装的项目依赖包
- public：存放静态资源公共资源，不会被压缩合并
- —favicon.ico：网站图标
- —index.html：首页入口.html文件
- src：项目开发主要文件夹
- —assets：静态文件，存放图片
- —components：存放组件
- —store：与vuex相关或pinna
- —styles：存放样式
- —utils：存放工具方法
- —views：界面组件
- —App.vue：根组件
- —main.ts：入口文件
- —router.ts：存放路由，实现界面跳转
- .gitignore：用来配置那些文件不归git管理
- package.json：项目配置和包管理文件（项目依赖和技术）
- README.md：说明文档，主要看项目运行的命令
- vite.config.ts：项目配置信息
