前端项目实践学习记录--尚品汇前台项目

菜鸟进阶ing

已于 2023-03-23 22:11:30 修改

阅读量355

点赞数

文章标签：前端 vue.js javascript

于 2023-03-23 21:46:50 首次发布

本文链接：https://blog.csdn.net/m0_46511479/article/details/129711358

版权

尚品汇前台项目实践：知识点记录【视频P1-P9】

一、vue-cli脚手架初始化项目：

利用脚手架初始化项目需要有node环境、webpack、和淘宝镜像（关于这一块可直接检索，如何创建vue项目，有很多详细说明）

创建命令：vue create XXX(此时就会出现一些配置项目的选项这一块可根据需求进行选择，因为是跟着做项目，就跟着视频选择了默认的)

接下来对初始化项目的各个文件夹进行了详细介绍（之前其实有接触过VUE项目，但似乎都没对这一块进行一个了解，这个的科普顿时就觉得这个项目视频针不错）

初始化的项目目录如上图所示：

node_modules：文件夹一般项目依赖

public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面。

src文件夹（程序员源代码文件夹）：

--assets文件夹：一般放置的是静态资源（一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面【而public则不会】。

--components文件夹：一般放置的是非路由组件（或一些常用的全局组件）。

--App.vue：唯一的根组件，Vue当中的组件都是(.vue)。

--main.js：程序的入口文件，也是整个程序当中最先执行的文件。

.gitinore：git忽略文件，里面配置的是一些不需要git跟踪和管理的文件。

babel.config.js：配置文件，与babel相关

package.json文件：记录着项目信息，eg:项目名是什么…有哪些依赖…项目怎么运行，怎么打包等…

package-lock.json：缓存性文件

README.md：说明性文件

到此就对vue项目目录的作用进行了一个了解。

-------------------------------------------------------------------------------------------------------------------------

二：项目的其他配置

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

(这一块在之前的学习中，未接触过，也觉得其实不用自动打开也行，不过还是学习学习吧~)

配置实现：在package.json文件夹里面，找到启动项目命令的配置，在后面加上 --open,即可实现啦~

2.2 eslint校验功能关闭

eslint可以检测语法是否正确，但在使用是也会有闭关，比如声明一个变量，但不使用会报错

实现：--在根目录下，创建一个vue.config.js文件，写入：

module.exports={

lintOnSave:false //关闭eslint

}

2.3src文件夹简写方法，配置别名

（这个在之前也未接触过，看到这里的第一反应是为什么，但往下一听发现接触到过）

起别名主要是为了避免写目录时，写..，就可以直接用别名例如@，来代替。[之前有看到过这种写法，还以为是那个遗漏的知识点，又躲懒一直没去追究]

实现：在根目录下创建jsconfig.json

三、项目路由分析

前端路由的实现使用的是vue-router，vue-router是vue.js的官方路由，vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来，即前端所谓的路由就是KV键值对，key:URL(地址栏中的路径)，value:相应的路由组件。

尚品汇这个项目的项目结构是上中下结构，根据项目介绍，路由组件为Home首页路由组件、Search路由组件、login登录路由、Refister注册路由。非路由组件：Header、Footer，Footer在首页、搜索页存在，在登录注册页不存在

学到这里对这部分进行了一些思考：

关于Footer在首页、搜索页存在，在登录页不存在，这是想到<slot>插槽。但视频中谈到使用v-if来实现，这部分可根据后续的实践，进行验证是否可以使用<slot>

四、完成非路由组件Header与Footer业务

开发项目流程：1、书写静态页面（HTML+CSS）2、拆分组件 3、获取服务器数据的数据动态展示 4、完成相应的动态业务逻辑

在正式开始建项目时，对一些不需要的组件进项清除：eg:HelloWorld.vue等，清空默认样式

由于这个项目主要是对业务逻辑进行实现，加之本人也想快点完成一个较好的项目，所以就直接用了尚硅谷提供的静态页面的内容。【有空再来实现看看这部分是不是可以用slot】

使用提供的静态页面的注意事项：

1、创建组件的时候，找准组件结构 + 组件的样式 + 图片资源；2、项目采用的是less样式，浏览器不识别less样式，需要通过less，less-loader【安装5版本的】进行处理less，把less样式变为css样式，浏览器才可以识别，安装命令：npm i less less-loader@5。@后面表示的版本号;3.需要在style标签的身上加上lang="less",不添加样式不生效

4.1使用组件的步骤(非路由组件)

1.创建或定义组件 2.引入组件 3.注册组件 4.使用组件

将Header组件所需要的内容填充完后，完成1；在app.vue中引入组件，import Header from './components/Header'，不用写index,因为会默认找index文件，完成2；使用components:{Header}注册组件，完成3，使用组件<Header/>

这部分完成后，谈到了清除样式，有点疑惑为什么是放开public里面以及这种引入方式，同时由于引入iconfont报错，可能的原因是因为未在iconfont官网去添加到项目，导致的路径不太对的原因，所以这里就放弃了这部分的引入。【这部分我是放置在assets里面，再在mian.js中引入的】

同理完成Footer组件内容。完成后的效果图如下图所示：

由于中间部分是路由组件，所以接下来所需做的是路由组件的搭建

五、路由组件的搭建

路由组件的搭建需要使用到vue-router库，安装命令：npm install vue-router

之前分析的页面，路由组件有4个，分别是：Home、Search、Login、Register

components文件夹：经常放置非路由组件（公用全局组件）

pages|views文件夹：经常放置路由组件

创建好每个路由组件，如下图所示：

5.1配置路由（一般放置在router文件夹中）

路由的配置，这部分的使用需要经历以下步骤，首先是：

①Vue和VueRouter的引入，

②vue-router的使用：因为vue-router是vue的一个插件，需要用vue.use(VueRouter)来使用

③配置路由，需要向外暴露VueRouter的实列，export default new VueRouter({}),在花括号里进行路由的配置，因为路由的配置需要路由组件，所以需要对组件进行引入

此时的相当于只是配置了映射关系，需要在main.js中进行引入和注册

此时还需要配置路由出口，来展示这些组件，即在header和footer中间。router-view也相当于占位，把映射关系对应的组件放置在这里。

测试路由组件的配置是否成功。

5.2配置路由总结

路由组件与非路由组件的区别？

1、路由组件一般放置在pages|views文件夹，非路由组件一般放置在components文件夹中
2、路由组件一般需要在router文件夹中进行注册（使用的为组件名字），非路由组件在使用的时候，一般都是以标签的形式使用
3、注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性。其中$route：一般获取路由信息【路径，query，params等等】，$router：一般进行编程式导航进行路由跳转【push|replace】

路由重定向：可以在项目跑起来的时候，访问/,立马让他定向到对应的组件页面