尚品汇前台项目---day1 超详细笔记

阿晴小太阳

已于 2023-04-01 10:03:44 修改

阅读量195

点赞数

文章标签： vue.js javascript 前端

于 2023-03-30 11:05:39 首次发布

本文链接：https://blog.csdn.net/sinat_35200791/article/details/129833188

版权

一、Vue文件目录分析

node_modules文件夹：项目依赖文件夹

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

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

（1）assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assects文件夹里面静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包JS文件里面。

（2）components文件夹：一般放置的是非路由组件（全局组件）

（3）App.vue：唯一的根组件，Vue当中的组件（.vue）。

（结构层template）(行为层script)（样式层style）

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

（.gitignore：上传到git的忽略文件）（一般不碰）

babel.config.js：配置文件（babel相关）（一般不碰）

package.json文件：认为项目‘身份证’，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行

package-lock.json：缓存性文件（下次打开时快速，可删除，但一般不删除）

README.md：说明性文件

二、自定义其他配置

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

package.json文件里面，修改如下代码：

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

2.2eslint 校验功能关闭

在根目录下，创建一个vue.config.js的文件，为什么要关闭呢？比如声明了变量，但是没有使用的情况下，eslint校验工具就会报错。

2.3src文件夹简写，@

在jsconfig.json

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

三、项目路由的分析

vue-router 前端所谓路由：KV键值对。

key：URL（地址栏中的路径）

value：相应的路由组件

注意：项目上中下结构

路由组件：Home首页路由组件、Search路由组件、login登录路由、register注册路由

非路由组件：Header【首页、搜索页】，Footer【在首页、搜索页】，但是在登录、注册页面是没有的

注意：随着点击变化（由一个页面变为另一个页面）的部分就是路由组件。没有变化（或者消失）的部分是非路由组件

开发项目步骤
- 书写静态页面（HTML+CSS）
- 拆分组件
- 获取服务器的数据动态展示
- 完成相应的动态业务逻辑
使用组件的步骤：
- 创建或者定义组件
- 引入组件
- 注册组件（components）
- 使用组件（<Header/>)

注意：

创建组件时：组件结构+组件样式+图片资源
当项目采用的样式是less时，需要通过less、less-loader【4版本】进行处理less，把less识别为css
若想让组件识别less，需要在style标签上加lang=“less

四、使用非路由组件的步骤

创建或者定义 , 引入 , 注册 , 使用

//App.vue文件
<template>
  <div>
    <!-- 使用 -->
    <Header></Header>
  </div>
</template>
 
<script>
//引入
import Header from './components/Header'
import Footer from './components/Footer'
 
export default {
  name: '',
  //注册
  components:{
    Header,
    Footer
  }
}
</script>

五、路由组件的创建

路由组件应该有四个：Home、Search、Login、Register

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

--pages/views文件夹：放置路由组件

1、在pages/views文件夹中配置路由组件

2、配置路由

项目当中配置的路由一般放置在router文件夹（src下）中

//配置路由的地方(router文件夹--index.js）
//引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:"/home",
            component: Home,      
        },       
        {
            path:"/search", 
            component: Search,    
            }
        },
        {
            path:"/login",
            component: Login,
        },
        {
            path:'/register',
            component:Register,
        },
        //重定向，在项目跑起来的时候，访问/，立马让它定向到首页
        {
            path:'*',
            redirect:"/home"
        }
    ]
})

注意：（1）需要在main.js中引入并注册路由

（2）还需要配置路由的出口，也就是在哪里展示（<router-view></router-view>）【App.vue中Header和Footer中间展示】

总结：

路由组件和非路由组件区别：
- 非路由组件放在components中，路由组件放在pages或views中
- 非路由组件通过标签使用，路由组件通过路由使用
- 在main.js注册玩路由，所有的路由和非路由组件身上都会拥有$router 、$route属性
- $route：一般获取路由信息（ path query params meta等）
- $router：一般进行编程式导航进行路由跳转（push replace）
路由的跳转：

路由跳转有两种形式：

声明式导航：router-link（可以理解为a标签，可以加class修饰）【就是把a替换成router-link】
编程式导航push、replace【就是利用点击事件等配置methods，methods里面写this.$router.push("路径")】

编程式导航：声明式导航能做的，编程式导航都能做，

但是编程式导航处理可以进行路由跳转，还可以做一些其他的业务逻辑。

六、Footer组件的显示与隐藏

显示或隐藏组件：v-if （操作DOM元素）或者v-show（通过样式display控制）

Footer组件：在Home、Search显示；在Login、Register隐藏

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

//配置路由的地方(router文件夹--index.js）
//引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引入路由组件
import Home from '@/pages/Home'
//配置路由
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:"/home",
            component: Home,
            meta:{show:true}//添加meta元素
        },
]

七、路由传参

7.1路由跳转的方式

声明式导航：router-link（务必有to属性），可以实现路由的跳转

 <!-- 声明式导航：务必要有to属性 -->
            <router-link to="/login">登录</router-link>
            <router-link class="register" to="/register">免费注册</router-link>

编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转（可以书写一些自己的业务）

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

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位

query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

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

routes:[
{//配置路由的地方(router文件夹--index.js）-->//配置路由
            path:"/search/:keyword", 需要占位 /:keyword  
在占位的后面加上一个问号【params可以传递或者不传递】 
            component: Search,
            meta:{show:true},
            name:"search",  第三种：对象（常用）路由跳转传参需要起名字
},]

<script>
export default {
  name: "",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {
      //路由传递参数：
      //第一种：字符串形式
      //this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase());
      //第二种：模板字符串
      //this.$router.push('/search/${this.keyword}?k=${this.keyword.toUpperCase()}')
      //第三种：对象（常用）
       this.$router.push({name:"search",params:{keyword:this.keyword},
                                         query:{k:this.keyword.toUpperCase()}})
    },
  },
};
</script>

八、路由传参相关面试题

8.1路由传参参数（对象写法）path是否可以结合params参数一起使用？

路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用

methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {
 
this.$route.push({path:'/serch',params:{keyword:this.keyword},
                                 query:{k:this.keyword.toUpperCase()}});
    },
  },

//不可这样写，会报错

8.2如何指定params参数可传可不传？

比如：配置路由的时候，占位了（params参数），但是路由跳转的时候就不传递。路径会出现问题。

如果路由要求传递params参数，但是你就不传递params参数，发现一个问题，URL会有问题，http://localhost:8080/#/?k=QWE （错误）

在配置路由的时候，在占位的后面加上一个问号【params可以传递或者不传递】

8.3params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

答：使用undefined解决：params参数可以传递、不传递（空的字符串） ||undefinde

8.4路由组件能不能传递props数据？

答：可以的：三种写法

在search组件要接收

多次执行push，控制台会出现警告

多次执行会抛出NavigationDuplicated的警告错误？

call | | apply区别

相同点：都可以调用函数一次，都可以纂改函数的上下文一次

不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组

“治本” 方法：

// 先把VueRouter原型对象的push,先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// console.log(originPush);

// 重写push/replace
// 第一个参数告诉原来的Push往哪里跳（出传递哪些参数）
// call||apply：
// 相同点：都可以调用函数一次，都可以篡改函数的上下文
// 不同点：call和apply传递参数：call传递参数用逗号隔开，apply方法执行的时候，传递数组
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        originPush.call(this, location, resolve, reject);
    } else {
        originPush.call(this, location, () => { }, () => { });
    }
}
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        originReplace.call(this, location, resolve, reject);
    } else {
        originReplace.call(this, location, () => { }, () => { });
    }
}

阿晴小太阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
尚品汇前台项目---day1 超详细笔记

六、Footer组件的显示与隐藏一、Vue文件目录分析node_modules文件夹：项目依赖文件夹public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源， webpack进行打包的时候，会原封不动打包到dist文件夹中。src文件夹（程序员源代码文件夹）（1）assets文件夹。
复制链接

扫一扫