Day 1
1 vue-cli 脚手架初始化项目
node + webpack + 淘宝镜像
(1)安装 node,然后再 cmd 命令执行安装 vue脚手架
npm install -g @vue/cli
(2)然后执行,查看版本
vue -V
(3) 创建一个名为 “app” 的 vue 2 项目
vue create app
(3)可以把 “app”项目拖拽到 VS code 编辑器中查看
(4)文件夹说明
node_modules 文件夹:项目依赖文件夹 public 文件夹:一般放置一些静态资源(图片),需要注意,放在 public 文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中。 src 文件夹:程序员源代码文件夹 - assets 文件夹:一般也是放置静态资源(一般放置多个组件共用的静态资源),需要注意,放置在assets文件夹里面的静态资源,在webpack打包的时候,webpack 会把静态资源当作一个模块,打包js文件夹里里面 - components 文件夹:一般放置的是非路由组件(全局组件) - App.vue : 唯一的根组件,Vue当中的组件(.vue) - main.js :程序入口文件,也是整个程序当中最先执行的文件 babel.config.js : 配置文件(babel 相关) package.json 文件:认为项目“身份证”,记录项目叫做什么,项目当中哪些依赖,项目怎么运行 package-lock.json 文件:缓存性文件 README.md :项目说明文件
2 项目的其他配置
(1)运行项目
npm run serve
(2)eslint 校验功能关闭
根目录 vue.config.js 文件
比如:声明变量但是没有使用 eslint 校验工具报错。
(3)src 文件夹简写方法,配置别名。
jsconfig.json 配置别名 @ 提示
3 项目路由的分析
vue-router
前端所谓路由:理解为 KV 键值对
key:URL(地址栏中的路径)
value:相应的路由组件
项目案例分析 Demo:
注意:项目上中下结构
路由组件:
Home 首页路由组件、Search 路由组件、Login 登录路由、Register 注册路由
非路由组件:
Header【首页、搜索页】、
Footer【在首页、搜索页】,但是在登录和注册页没有
4 完成非路由组件Header 与 Footer 业务
在咱们项目当中,不再以 HTML + CSS 为主,主要搞业务,逻辑。
在开发项目的时候:
1):书写静态页面(HTML + CSS)
2):拆分组件
3):获取服务器的数据动态展示
4):完成相应的动态业务逻辑
注意1:创建组件的时候,组件结构 + 组件的样式 + 图片资源
注意2:咱们项目采用 less样式,浏览器不识别 less 样式,需要通过 less 、 less-loader 进行处理less,把less样式处理 less ,把less 样式变为css样式,浏览器才可以识别。
install --save less less-loader
注意3:如果想让组件识别less 样式,需要在 style 标签的身上加上lang=less
(1)使用组件的步骤(非路由组件)
- 创建或者定义
- 引入
- 注册
- 使用
参考:屏蔽 eslintrc 报错:修改vue.config.js
添加:
lintOnSave:false
5 路由组件的搭建
在上面分析的时候,路由组件应该有四个:Home、Search、Login、Register
插件:vue-router 安装
npm install --save vue-router //安装最新版 npm install --save vue-router@3 // Vue 2 安装需要添加 @3
- components 文件夹:经常放置的非路由组件(公共全局组件)
- pages|views 文件夹:经常放置路由组件
(1)配置路由
项目当中配置的路由一般放置在 router 文件夹中
(2)总结
路由组件和非路由组件的区别
1)路由组件一般放置在 pages| views 文件夹,非路由组件一般放置 components 文件夹中
2)路由组件一般需要在 router 文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用
$route:一般获取路由信息(路径,query,params 等)
$router:一般进行编程式导航进行路由跳转(push | replace)
(3)路由的跳转
路由的跳转有两种形式:
声明式导航 router-link ,可以进行路由的跳转
编程式导航 push| replace,可以进行路由跳转
编程式导航:声明式导航能做的,编程式导航都能做。
但是编程式导航除了可以进行路由跳转,还可以做一些其他的业务逻辑
6 Footer 组件的显示与隐藏
显示或者隐藏组件:v-if | v-show
Footer 组件:在 Home、Search 显示 Footer 组件
Footer 组件:在登录、注册送隐藏的
(1)我们可以根据组件身上的 $route 获取当前路由的信息,通过路由路径判断 Footer 显示与隐藏。
(2)配置路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对象,它的 key 不能随意定义。
8 路由传参
(1)路由跳转有几种方式?
比如:A-> B
声明式导航:router-link (务必要有 to 属性),可以实现路由的跳转
编程式导航:理由的是组件实例的 $router.push | replace 方法,可以实现路由的跳转。(可以书写一些自己的业务)
(2)路由传参,参数有几种写法?
params 参数:不属于路径当中的一部分,类似 ajax中的 queryString ;home?k=v ,不需要占位。
query 参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位。
9 路由传参面试题
(1)路由传递参数(对象写法)path是否可以结合params参数一起使用?
不能
(2)如何指定 params 参数可传可不传?
path:"/search/:keyword?", // 配置路由后面增加 “?”
(3)params 参数可以传递也可以不传递,但是如果传递空串,如何解决?
使用 undefined 解决: params 参数可以传递、不传递(空的字符串)
this.$router.push({ name: "search", params: { keyword: '' || undefined }, query: { keyword: this.keyword.toUpperCase() } });
(4)路由组件能不能传递 props 数据?
可以,
1)布尔值写法
props:true
2)对象写法
props:{a:1,b:2}
3)函数写法:可以params参数、query参数、通过props 传递给路由组件
props:($route)=>{ return {keyword:$route.params.keyword,k:$route.query.k} }