首页 > 其他分享 >尚品汇笔记(前台)

尚品汇笔记(前台)

时间:2022-10-31 20:26:53浏览次数:81  
标签:vue less Footer 尚品 笔记 文件夹 前台 组件 路由

1)要求
1.1:每一天老师书写代码务必三遍
1.2:node + webpack + VScode + 谷歌浏览器 + git
1.3:数组的方法 + promise + await + async + 模块化........

2)脚手架使用
2: vue init webpack 项目的名字
3|4:vue create 项目名称
脚手架目录:public + assets文件夹区别
node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源,打包上线的时候,public文件夹里面资源原封不动打包到dist文件夹里面
src:程序员源代码文件夹
-----assets文件夹:经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
-----components文件夹:一般放置非路由组件(或者项目共用的组件)
App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json:看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

3)脚手架下载下来的项目稍微配置一下
3.1:浏览器自动打开
在package.json文件中
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

3.2关闭eslint校验工具
创建vue.config.js文件:需要对外暴露
module.exports = {
lintOnSave:false,
}
3.3 src文件夹的别名的设置
因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些
创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/": [
"src/
"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}

4:项目上传GIT
微信小程序实战课的时候,会带着大家玩耍的
注意:前面基础课程当中,创建分支、处理冲突等等
https://gitee.com/jch1011/shangpinhui_0607.git

5)路由的配置
vue-router
路由分为KV

node平台(并非语言)
对于后台而言:K即为URL地址 V即为相应的中间件
http://localhost:8080/0607
app.get("/0607",(res,req)=>{
res.send('我是祖国的老花骨朵');
});

前端路由:
K即为URL(网络资源定位符)
V即为相应的路由组件

5.1路由的一个分析
确定项目结构顺序:上中下 -----只有中间部分的V在发生变化,中间部分应该使用的是路由组件
2个非路由组件|四个路由组件
两个非路由组件:Header 、Footer
路由组件:Home、Search、Login(没有底部的Footer组件,带有二维码的)、Register(没有底部的Footer组件,带二维码的)

5.2安装路由
cnpm install --save vue-router
--save:可以让你安装的依赖,在package.json文件当中进行记录
5.3创建路由组件【一般放在views|pages文件夹】
5.4配置路由,配置完四个路由组件

6)创建非路由组件(2个:Header、Footer)

非路由组件使用分为几步:
第一步:定义
第二步:引入
第三步:注册
第四步:使用

非路由组件的结构的搭建:
前台项目的结构与样式不需要自己写的,老师准备好了
辉洪老师静态页面:
结构 + 样式 +图片资源

项目采用的less样式,浏览器不识别less语法,需要一些loader进行处理,把less语法转换为CSS语法

1:安装less less-loader@5
切记less-loader安装5版本的,不要安装在最新版本,安装最新版本less-loader会报错,报的错误setOption函数未定义

2:需要在style标签的身上加上lang="less",不添加样式不生效

7)路由的跳转
路由的跳转就两种形式:声明式导航(router-link:务必要有to属性)
编程式导航push||replace
编程式导航更好用:因为可以书写自己的业务逻辑

面试题:v-show与v-if区别?
v-show:通过样式display控制
v-if:通过元素上树与下树进行操作
面试题:开发项目的时候,优化手段有哪些?
1:v-show|v-if
2:按需加载
8)首页|搜索底部是有Footer组件,而登录注册是没有Footer组件
Footer组件显示|隐藏,选择v-show|v-if
路由元信息

9)路由传参
params参数:路由需要占位,程序就崩了,属于URL当中一部分
query参数:路由不需要占位,写法类似于ajax当中query参数
路由传递参数先关面试题
1:路由传递参数(对象写法)path是否可以结合params参数一起使用?
不可以:不能这样书写,程序会崩掉
2:如何指定params参数可传可不传?
3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?
4:如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题
5: 路由组件能不能传递props数据?

标签:vue,less,Footer,尚品,笔记,文件夹,前台,组件,路由
From: https://www.cnblogs.com/wh024/p/16845604.html

相关文章

  • 学习笔记-PHP反序列化
    PHP反序列化相关文章&Source&ReferenceWeb安全|PHP反序列化入门这一篇就够了php反序列化练习题php反序列化知识点总结相关工具php在线反序列化工具PHP......
  • 学习笔记-phpinfo
    phpinfo相关文章phpinfo可以告诉我们什么PHPINFO中的重要信息amazingphpinfo()phpinfo中值得注意的信息php中函数禁用绕过的原理与利用相关工具proudwind......
  • 学习笔记- PHP回调函数
    PHP回调函数call_user_funccall_user_func—把第一个参数作为回调函数调用,其余参数是回调函数的参数<?phpcall_user_func($_GET['a1'],$_GET['a2']);?>//xx......
  • 学习笔记-POP
    POP相关文章&Source&ReferencePHP对象注入之pop链构造萌新入门pop链什么是POP面向属性编程(Property-OrientedPrograming)用于上层语言构造特定调用链的方法......
  • 《程序员修炼之道:从小工到大家》十月份阅读笔记一
    第14节纯文本的威力1、纯本文由可打印字符组成,人可以直接阅读和理解其形式。这里强调可打印含义是字符时经过编码的可阅读字符,而不是二进制。这在现在看来几乎是不用......
  • 学习笔记-无字母数字Webshell
    无字母数字Webshell相关文章&Source&Reference记一次拿webshell踩过的坑(如何用PHP编写一个不包含数字和字母的后门)一些不包含数字和字母的webshell无字母数字W......
  • 《程序员修炼之道:从小工到专家》第三章读书笔记
     第三章的内容是基本工具,我们都知道,每个工匠在职业生涯时都会准备一套品质良好的基本工具,工匠拿着趁手的工具才能更好的展现他的才干,工具越好,你越能更好的掌握它们的用法......
  • 学习笔记-绕过php禁用函数
    bypass_disable_function相关文章&Source&ReferenceCTF中的命令执行绕过无需sendmail:巧用LD_PRELOAD突破disable_functionsphp中函数禁用绕过的原理与利用相......
  • 学习笔记-绕过php文件目录访问限制
    bypass_open_basedir相关文章&Source&Referencephp中函数禁用绕过的原理与利用利用symlink通过建立软链达成bypass<?phpsymlink("abc/abc/abc/abc","temp......
  • Java学习笔记day1——注释
    /*java包含以下三种注释方法:1.单行注释2.多行注释*单行多行注释对所写程序进行注释说明,增强可读性,方便自己方便别人。*还可以调试所写的代码,注释内容均不参与编译......