day1

vue-cli脚手架初始化项目

• vue create 项目名

node + webpack + 淘宝镜像

1.项目的其他配置

1. 项目运行起来的时候让浏览器自动打开 ：在package.json里加入 --open

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

2. eslint校验功能关闭 ：声明变量未使用会报错
   1. 创建vue.config.js
   2. lintOnSave:false
3. src文件夹简写方法，在jsconfig.json配置别名：@符代表的是src文件夹，但在node_modules和dist里不能用

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

2.项目路由的分析

• 路由组件：Home首页，Serch、login登陆、Register注册路由
• 非路由组件：Head组件（首页和搜索页有），Footer组件（在首页和搜索页有，但是在登录和注册页面没有）

3.Header和Footer的完成

• 在开发过程中，不再以html+css为主，主要搞业务和逻辑

• 开发项目的流程：

  1. 书写静态页面（html+css）
  2. 拆分组件
  3. 获取服务器的数据动态展示
  4. 完成相应的动态业务逻辑

• 注意：创建组件的时候，组件的结构+样式+图片资源，如果是less样式，需要额外下载less并且，vue2应该安装5版本的less

  • npm install --save less less-loader@5
  • 如果想让组件识别less样式，需要在 style标签上加上scoped lang="less"

• 使用组件的步骤（非路由组件）

  1. 创建或引用
  2. 引入
  3. 注册
  4. 使用

4.路由组件的搭建

• 使用vue-router
• conponents文件夹：一般放置非路由组件（公用全局组件）
• pages | views文件夹：一般放置路由组件

1. 配置路由

   • 项目当中配置的路由一般放置在router文件中
   • 在main.js中注册路由
   • 在需要展示路由的地方使用router-view

2. 总结：

   • 路由组件和非路由组件的区别：放的文件夹位置不同，使用方法不同（路由组件需要在router中注册，非路由组件），注册完组件，不管路由组件还是非路由组件身上都有$route和$router属性

• $route：一般获取路由信息（路径、query、params等）
• $router：一般进行编程式导航进行路由跳转（push、replace）

3. 路由的跳转

• 声明式导航router-link（必须要有to属性）

<router-link to="/login">登录</router-link>
<router-link class="register" to="/register">免费注册</router-link>

• 编程式导航push | replace（@click）

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button>

methods:{
        // 搜索按钮的回调函数,需要向search路由进行跳转
        goSearch(){
            this.$router.push("search")
        }
    }

• 声明式导航能做的，编程式导航都能做，但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑

5.Footer组件显示与隐藏

• Footer组件在Home、Search显示，在登录注册时隐藏
• 显示或者隐藏组件：v-if | v-show

1. 可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer的隐藏与显示

<!-- 在Home或者Search显示，在登录注册隐藏 -->
<Footer v-show="$route.path=='/home' || $route.path=='/search'"></Footer>

2. 路由元信息的使用

• 配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，他的key不能乱写

<Footer v-show="$route.meta.show"></Footer>

routes: [{
        path: "/home",
        component: Home,
        meta:{
            show:true
        }
    },

6.路由传参

1. 路由跳转有几种方式？声明式导航+编程式导航

2. 路由传参，参数有几种写法？

   • params参数：属于路径中的一部分，需要注意在配置路由的时候需要占位
   • query参数：不属于路径中的一部分，类似ajax中的queryString /home?k=v&k=v，不需要占位

<input 
	type="text" 
	id="autocomplete" 
	class="input-error input-xxlarge" 
	v-model="keyword"/>

methods: {
        // 搜索按钮的回调函数,需要向search路由进行跳转
        goSearch() {
            // 路由传参
            // 1.字符串形式，配置时要加path: "/search/:keyword"
            this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase())
            // 2.模板字符串，配置时要加path: "/search/:keyword"
            this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
            // 3.对象，配置时要为组件配置name属性name:'search',
            this.$router.push({
                name:"search",
                params:{
                    keyword:this.keyword
                },
                query:{
                    k:this.keyword.toUpperCase()
                }
            })
        }
    }

7.路由传参相关面试题

1. 路由传递参数（对象写法）path是否可以结合params参数一起使用？
   • 路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法是不能与params参数一起使用的
2. 如何指定params参数可传可不传？
   • 如果路由要求传递params参数，但是你不传递，URL就会出现问题，所以需要在path的占位的后面加上一个问号path: "/search/:params?",
3. params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
   • 使用undefined解决：params:{keyword:'' || undefined},
4. 路由组件能不能传递props数据？
   • 可以，有三种方式

//需要使用对象方式路由传参
//index.js
{
        path: "/search/:keyword?",
        component: Search,
        name:"search",
        meta:{
            show:true
        },
        // 路由组件能不能传递props数据
        // 1️⃣布尔值写法:将params作为路由组件身上的属性
        // props:true,
        // 2️⃣对象写法:额外的给路由组件传递一些props
        // props:{a:1,b:2}
        // 3️⃣函数写法：可以把params、query，通过props传递给路由组件
        props:($route)=>{
            return {
                keyword:$route.params.keyword,
                k:$route.query.k
            }
        },
    },
    
 //需要在Search接收
export default {
  name:'',
  // 路由组件可以传递props
  props:['keyword','a','b','k']
}