笔记day1-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45980065/article/details/144416998

文章目录

1 vue-cli脚手架初始化项目
2 项目的其他配置
3 项目路由的分析
4 完成非路由组件Header与Footer业务
- 4.1 使用组件的步骤（非路由组件）
5 路由组件的搭建
6 Footer组件显示与隐藏
7 路由传参
- 7.1 路由跳转有几种方式？
- 7.2 路由传参，参数有几种写法？
8 路由传参相关面试题

1 vue-cli脚手架初始化项目

node + webpack + 淘宝镜像
node_modules文件夹：项目依赖文件夹
public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webcpack在打包的时候，会原封不动的打包到dist文件夹中
src文件夹(程序员源代码文件夹)：
- assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里面的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包在JS文件里面
- components文件夹：一般放置的是非路由组件（全局组件）
- App.vue：唯一的根组件，Vue当中的组件（.vue）
- main.js：程序入口文件，也是整个程序当中最先执行的文件
babel.config.js：配置文件（babel相关）
package.json文件：项目"身份证"，记录项目叫做什么，项目当中有哪些依赖，项目怎么运行
package-lock.json文件：缓存性文件

2 项目的其他配置

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

package.json

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

2.2 eslint校验功能关闭

在根目录下，创建一个vue.config.js

比如：声明变量但是没有使用eslint校验工具报错

module.exports = {
  //关闭eslint
  lintOnSave: false
}

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

jsconfig.json配置别名@提示

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

3 项目路由的分析

vue-router
前端所谓路由：kv键值对
key：URL（地址栏中的路径）
value：相应的路由组件
注意：项目上中下结构
路由组件：
Home首页路由组件、Search路由组件、Login登录路由、Register注册路由
非路由组件：
Header【首页、搜索页】
Footer【在首页、搜索页】，但是在登录|注册页面是没有

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

在项目中，不再以HTML + CSS为主，主要搞业务、逻辑
在开发项目的时候：
- 书写静态页面（HTML + CSS）
- 拆分组件
- 获取服务器的数据动态显示
- 完成相应的动态业务逻辑
注意1：创建组件的时候，组件结构 + 组件的样式 + 图片资源
注意2：项目采用less样式，浏览器不识别less样式，需要通过less、less-loader【安装5版本的】进行处理less，把less演示变为css样式，浏览器才可以识别
注意3：如果想让组件识别less演示，需要在style标签的身上加上lang=less