xx头条项目前置工作-创建vue项目与安装vant组件库

vue2-xx头条项目从0开始流程

一、创建vue项目

1. xx头条Vue项目时需要加上 路由 和 ESLint；点击code文件夹路径C:\Users\47685\Desktop\前端学习（总）\4. 第四阶段 Vue2+Vue3\1. Vue2\day 8 案例：xx头条\code，输入cmd 打开终端；
2. 输入 vue create demo-toutiao， demo-toutiao 是自定义文件名
3. 选择 Manually select features 手动安装vue项目
4. 选择 Babel 、Router(路由)、 CSS Pre-processors(css预处理器) 、 Linter / Formatter(ESLint)
5. vue版本选择？选择 2.x
6. 终端询问：Use history mode for router?是否需要历史模式的路由，这种模式需要与后端配合，故选择 n，我们学习的是 # 开头的Hash地址，通用性强
7. Pick a CSS pre-processor 选择 Less
8. ESLint规范选择？标准规范 ESLint + Standard config
9. 选择格式检查时间点？选择保存时就检查修复 Lint on save
10. Babel, ESLint 等配置文件时存放到单独的文件里还是都放到package.json文件里？选择In dedicated config files 存放到单独文件夹；
11. Save this as a preset for future projects? (y/N)是否需要存为预设？Y 需要
12. 将预设存为？Save preset as: heima-toutiao-2022/6/29
13. 提示Successfully created project demo-toutiao. 项目创建完毕！

二、梳理项目结构

1. src/下有components 和 views 文件夹，均是用来存放组件，通过路由来展示和切换的组件放在 views 文件夹，不通过路由来展示和切换的可复用的组件放在 components 文件夹；
2. 创建项目时选择了Router，故自带router/index.js文件，已自动完成vue-router 安装和配置的步骤中的：终端安装vue-router包、router/index.js创建路由模块、src/main.js 导入并挂载路由模块 三项工作；
3. 打开App.vue根组件，全选删除内容，< + 回车 生成组件基本结构，