# Vue3_CarMove_Demo **Repository Path**: wenjianning/vue3_-car-move_-demo ## Basic Information - **Project Name**: Vue3_CarMove_Demo - **Description**: vue3的猫眼电影项目 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2023-03-15 - **Last Updated**: 2023-12-11 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue3_CarMove_Demo #### 介绍 vue3的猫眼电影项目 # 项目知识 ## 项目初始化 1. vue create vue-demo ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/2Project_configuration.png) 2. 配置工具包 上下键选择，空格确定选择，选好后，回车进行下一项 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/3Project_configuration.png) ``` (*) Choose Vue version // 选择vue版本（2.x还是3.x） (*) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 (*) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行。 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 (*) Router // vue-router（vue路由） (*) Vuex // vuex（vue的状态管理模式） (*) CSS Pre-processors // CSS 预处理器（如：less、sass） (*) Linter / Formatter // 代码风格检查和格式化（如：ESlint） ( ) Unit Testing // 单元测试（unit tests） ( ) E2E Testing // e2e（end to end） 测试 ``` 回车后进入工具包配置，选择自己熟悉的，使用广泛的 3. 1. 选择vue版本，这里我选择的是vue3.x版本，3.x版本更改较多，如果对3.x版本语法不熟悉的请谨慎选择。 选择vue的版本 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/4Project_configuration.png) 2. 是否选择class风格的component，选n ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/5Project_configuration.png) 3. 是否使用babel来处理ts ，babel可以进行polifill，这里选择yes ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/6Project_configuration.png) 4. 是否选择 router的history模式（router有两种模式：history，[hash](https://so.csdn.net/so/search?q=hash&spm=1001.2101.3001.7020)，默认是hash模式），选择Y， ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/7Project_configuration.png) 5. 因为我们在开始的时候选择了CSS Pre-processors,即css预处理器，所以这里还会让我们选择一种css预处理方式，这里习惯哪种就可以选择哪种，我这里选择了Less ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/8Project_configuration.png) 6. 接下来会选择ESLint配置，这里选择标准配置 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/9Project_configuration.png) *TSLint: ts格式检验工具 *ESLint with error prevention only: ESLint 只会进行错误提醒 *ESLint + Airbnb config: ESLint Airbnb标准 *ESLint + Standard config: ESLint Standard 标准 *ESLint + Prettier: ESLint（代码质量检测）+ Prettier（代码格式化工具） 7. 代码检查方式: 保存时检查 or 提交时检查，我选择保存时检查 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/10Project_configuration.png) 8. 选择配置文件保存在哪里，生成单独的还是就生成在package.json中，选package.json文件里 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/11Project_configuration.png) 9. 配置是否形成预设,是否保存配置，这里选no ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/12Project_configuration.png) 4. 配置完成，回车进行配置下载安装 完整配置选项 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/1Project_configuration.png) 5. 当下载完成后，会出现以下信息 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/13Project_configuration.png) 6. 继续在命令行输入以上两个提示的命令，就能执行项目了。 ```javascript cd test yarn serve ``` 7. 如果浏览器没有自动打开，就在浏览器输入localhost:8080进行访问项目。看见vue的页面就说明成功了，就可以开始写项目了 8. ``` 在终端：ctrl + c 结束项目运行 ``` ## 快速删除文件 配置错误，快速删除node_modules文件 1. 安装 rimraf ``` npm i rimraf -g ``` 2. 进入需要清理的项目中，执行 ``` rimraf node_modules ``` ## git上传配置 1. 忽略node_modules文件进行上传 首先，在项目目录下打开git Bash Here命令窗口，输入命令：touch .gitignore 完成后项目中会出现一个后缀名为“.gitignore”为的文件 2. 在文件中写入需要忽略上传的文件名称 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/master/README_IMG/14git_push_config.png) ## git 操作 ### git基本命令 ```javascript 上传所有文件到暂存区 git add . 提交项目到本地仓库 git commit -m '本次修改的内容' 提交项目到指定分支 git push -u origin 'master' 基于当前分支创建其他分支 创建dev分支 git branch dev 切换到dev分支 git checkout dev 列出所有远程分支 git branch -r 查看提交日志 git log 将dev分支合并到当前分支 ,要先切换到想更新的分支上，再执行下列代码 git merge dev 删除本地分支 git branch -d xxx ``` 合并分支 ![](https://gitee.com/wenjianning/vue3_-car-move_-demo/raw/dev/README_IMG/15gitmerge.png) ### [git分支](https://so.csdn.net/so/search?q=git%E5%88%86%E6%94%AF&spm=1001.2101.3001.7020)命名规范 git分支分为集成分支，功能分支、和修复分支。分别命名为develop，feature和hotfix，均为单数。不可使用features、future、hotfixes、hotfixs 等错误名称。 - master（主分支，永远是可用的稳定版本，不能直接在该分支上开发） - develop（开发主分支，所有新功能以这个分支来创建自己的开发分支，该分支只做合并操作，不能直接在该分支上进行开发） - feature-xxx（功能开发分支，在develop上创建分支，以自己开发功能模块命名，功能测试正常后合并到develop分支） - feature-xxx-fix（功能bug修复分支，feature分支合并之后发现bug，在develop上创建分支进行修复，之后合并回develop分支） **PS：feature分支在申请合并之后，未合并之前还是可以提交代码的，所以feature在合并之前还可以在原分支上继续修复bug** - hotfix-xxx（紧急bug修改分支，在master分支上创建，修复完成后合并到master） - bugfix/*分支 （短期从develop创建） - release/*分支（短期从develop创建） ### git提交记录规范 每个git commit记录都需要按照固定格式，具体格式为： ``` 第一行：作者，功能模块名称或者 功能模块ID 第二行：提交描述。中英文均可 ： + 增加代码 ： * 修改代码 ： - 删除代码 ``` ## 1.初始化路由及占位页面 ### 1. 页面初始化 - 在components中书写自己的组件 - 在public的index.html文件中，修改页面title - 在 assects 文件夹下面创建 css 文件夹、images 文件夹，用来保存静态资源 - 在 App.vue 文件中删除样式信息，导入初始化 css 信息，即在assects下的css文件 - 在views中书写路由页面模板，就是显示的页面内容，进行页面占位 - 在router/index.ts中，构建页面路由 ### 2. 路由配置------router/index.ts - 导入路由 ![](E:\Demo\vue3_-car-move_-demo\README_IMG\router_index\1router.png) - 路由配置 ![](E:\Demo\vue3_-car-move_-demo\README_IMG\router_index\2router.png) 其他需要显示的路由都可以这样配置 ![](E:\Demo\vue3_-car-move_-demo\README_IMG\router_index\3router.png) 也可以通过这种方式导入，就不用去import引入了 - 在app.vue中更改路由页面跳转 ![](E:\Demo\vue3_-car-move_-demo\README_IMG\router_index\4router.png) ## 2. 底部导航功能实现及网络请求封装 ### 1. 引入vant3移动端UI仓库 # 项目难点 # 其他 #### 软件架构 软件架构说明 #### 安装教程 1. git clone https://gitee.com/wenjianning/vue3_-car-move_-demo.git 2. cd catmovie 3. npm i 4. yarn serve #### 使用说明 1. 没有，就一个demo，学vue用的 #### 参与贡献 1. 单人副本