vue2-xx头条项目从0开始流程
一、创建vue项目
1、xx头条Vue项目时需要加上 路由 和 ESLint；点击code文件夹路径C:\Users\47685\Desktop\前端学习（总）\4. 第四阶段 Vue2+Vue3\1. Vue2\day 8 案例：黑马头条\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根组件，全选删除内容，< + 回车 生成组件基本结构
4、清空删除components 和 views 文件夹里的组件；
5、清空router/index.js下的const route数组内容，删除import HomeView from '../views/HomeView.vue'
三、运行vue 项目
1、在VSCode中打开刚刚创建好的vue项目 demo-toutiao，ctrl + ` 打开VSCode自带的终端；
2、观察demo-toutiao文件夹中是否有node_modules 包存放文件，若没有则需要终端输入 npm i 安装包；
3、运行项目，终端输入 npm run serve，App running at:- Local: http://localhost:8080/ 运行成功
4、谷歌浏览器输入http://localhost:8080/打开vue项目，app根组件渲染成功，检查面板console没有报错
5、项目初始化完成！
四、安装和配置Vant组件库
1、打开Vant官网地址：vant-contrib.gitee.io/vant/#/zh-C…；
2、安装组件库：通过 npm 安装Vant组件库，VSCode终端输入：官网报错：npm i vant@latest-v2；报错用这个：npm i vant@latest-v2 -S --legacy-peer-deps
3、引入组件，使用官方文档的：导入所有组件，Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积；具体做法：
4、引入组件：src/main.js中，import Vue from 'vue'（导入Vue，已导入） import Vant from 'vant'（导入vant组件库） import 'vant/lib/index.css'（导入vant样式） Vue.use(Vant)（vue项目应用vant插件）；
5、测试是否引入成功：vant官网——基础组件——Button按钮——组件已全部引用，无需再次引用——复制代码演示里的按钮类型代码到App.vue的App 根组件下方——打开谷歌浏览器——button按钮显示——vant组件引入成功！
