项目资料

项目源码：https://gitee.com/HusePanghu/project-SP
项目地址：HusePanghu.SPH

---

前言

提示：本文档的编撰初衷是用于复习和回顾该项目，而非该项目的教程文档，弊处多多，敬请包涵。欢迎大家在评论区交流。

---

1、各种基础文件介绍     

node_modules:存储项目依赖文件
public:存放项目静态资源，注意：当项目打包时，webpack会把public文件夹原封不动的打包到dist文件中
src:程序员代码文件夹
assets:组件中的静态资源文件夹，一般存放组件公用的静态资源；在webpack打包的时候会将assets作为一个模块，打包到一个js文件夹中。
components:组件文件夹，存放vue中的各个组件。（一般是非路由组件）
App.vue:唯一的一个根组件
main.js:项目的入口文件，也是项目中最先执行的一个文件。

babel.config.js:与Babel相关的配置文件
package.js:相当于项目‘身份证’，记录着项目的名称，项目有哪些依赖，项目怎么运行。
package-lock.json:缓存性文件

2、项目的一些其他配置：

        1、项目启动 npm run serve 之后自动打开网页（localhost：8080）
        package.json

"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"}

         2、 关闭eslint校验提示
                在vue.config.js文件夹中 设置 lintOnSave:false

//关闭lint校验提示
lintOnSave:false,

        3、src文件夹设置别名 @ ,src文件夹创建别名，src/...简化为@/...

 "paths": {"@/*": ["src/*"]},

3、项目路由的分析：

        1、vue-router
                何为路由：kv键值对
                key:路由组件的路径
                value:路由组件

        2、项目中的路由组件：
                home组件、search组件、login组件、register组件
        3、项目中的非路由组件：
                header组件、footer组件（在home、search组件中显示，在login、regist中不展示）

4、项目流程

        项目以开发业务和逻辑为主，css和HTML开发为次
                1、编辑静态页面、确定页面样式
                2、拆分组件
                3、获取服务器的动态展示数据
                4、完成相应的动态业务逻辑
        注意事项：1、编辑静态页面时，组件的结构+组件的样式+图片资源,编辑不要有遗漏 2、本项目中样式使用的是less样式，在