001-教程简介

在这里插入图片描述

002-vue脚手架创建项目

创建项目

vue create sph
在这里插入图片描述
选择vue2

项目结构说明

在这里插入图片描述

003-项目的其他配置

项目运行起来的时候，浏览器自动打开

正常情况下
在这里插入图片描述
在项目地址输入npm run serve 之后，项目可以起来，但是无法自己打开浏览器，还需要手动打开并输入地址才能访问项目

进行上图配置后就可以自动打开浏览器并访问项目了

--open --host=localhost

关闭eslint校验工具

eslint会进行代码检查，如果声明了变量没有使用的话就会报错，起不来项目，这样不便于开发，可以采取如下方式把它关闭掉
在这里插入图片描述

给src文件夹起别名

在这里插入图片描述
默认就有这个配置，不用单独进行配置了

004-项目的路由分析

首先要区分一个概念，路由组件和非路由组件。
路由组件就是指对应访问地址的组件，比如说：/search 这个地址会访问到搜索页面，这个搜索页面就是一个路由组件。
非路由组件就是不和地址强绑定的组件，比如说上面说的这个搜索页面，里面会有头部和底部，首页也会有头部和底部，其他的也会有，这时候，头部和底部这两个组件就可以抽象出来成为两个非路由组件

根据该规则，可以把该项目分成如下的路由配置
在这里插入图片描述