vue项目实战-尚品汇

爱健身的程序员sa

已于 2022-03-29 10:52:39 修改

阅读量4k

点赞数 10

分类专栏： vue实战项目文章标签： vue 前端 javascript

于 2022-03-29 10:51:50 首次发布

本文链接：https://blog.csdn.net/sassssiii/article/details/123804354

版权

vue实战项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

day1

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

需要使用到的工具有

node+ webpack +taobao镜像

1.创建初始化项目

1.vue-cli脚手架初始化项目（这是一个vue2的项目记得在选择版本的时候选择vue2）

vue create demo // demo是项目文件的名称

vue-cli脚手架目录

node_modules文件夹：项目依赖文件夹
public文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中
src文件夹（程序员源代码文件夹）：
- assets文件夹：一般也是放置静态资源（一般放置多个组件公用的静态资源），需要注意，放置再assets文件夹里面静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包js文件里面
- components文件夹：一般放置的是非路由组件（全局组件）
- app.vue：唯一的跟组件，vue当中的组件（.vue）
babel.config.js:配置文件（babel相关）
package.json：认为项目身份证，记录项目叫做什么，项目中有哪些依赖，项目怎么运行
package-lock.json：缓存行文件
README.md说明性文件

2.项目的配置

1.项目运行起来让浏览器自动打开

//package.json文件  在serve启动这里加上--open
 "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.关闭eslint的校验功能

最新的cli脚手架中都有vue.config.js 如果没有自建创建一个即可在里面加入

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

3.项目路由的分析

前端所谓路由：kv键值对，

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

value：相应的路由组件

注意项目是上中下的项目

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

非路由组件：Header组件（首页、搜索页）、Footer组件（在首页、搜索页），但是在登录页面是没有

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

在咱们项目中，不在以html +css ，主要搞逻辑和业务

在开发项目的时候相应步骤：

1.书写静态页面 html+css

2.拆分组件

3.获取服务器的数据动态展示

4.完成相应的动态业务逻辑

注意：

1.创建组件的时候组件结构+组件的样式+图片资源

2.咱们项目采用的less样式，浏览器不识别less样式，需要通过less、less-loader(版本5）进行处理less，把less样式变为css样式，浏览器才可以识别

3.如果想让组件识别less样式，需要在style标签的身上加上lang=less

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

--创建或者定义组件

--引入

创建好组件后在跟组件App.vue下引入

--注册

在components下进行注册

--使用

通过标签的方式使用

5.路由组件的搭建

在上面分析的时候，路由组件应该有四个:Home,Search,Login,Register

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

-pages|views文件夹：经常放置路由组件

首先在views文件夹下创建着4个文件夹

以Home下的代码为例

写入vue代码，其余四个都是相同的，只是内容不相同

<template>
<div>
    我是home组件
</div>
</template>

<script>
export default {
  name: ''
};
</script>

<style scoped>
</style>

5.1配置路由

项目中配置的路由一般放置在router文件夹中

5.2 路由组件与非路由组件的区别

1：路由组件一般放置在pages|views文件夹，非路由组件一般放置在compnoents文件夹中

2：路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般用标签名字使用

3.注册完路由，不管路由路由组件、还是非路由组件身上都有$route和$router属性

$route:一般获取路由信息[路径，query params信息]

$router:一般进行编程式导航进行路由跳转【push|replace】

5.3路由的跳转

路由的跳转有两种形式：

声明式导航router-link，可以进行路由的跳转

编程式导航push|replace，可以进行路由跳转

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

Footer组件：在home search显示Footer组件

Footer组件：在登录、注册时候隐藏的

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

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

设置好路由元信息后直接使用即可

7.路由参数

7.1路由的跳转有几种方式？

比如A->B

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

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

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

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

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

router文件下index.js

src/router/index.js文件

//配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";
//使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from '@/views/Home'
import Search from '@/views/Search'
import Login from '@/views/Login'
import Register from '@/views/Register'


// 配置路由
export default new VueRouter({
    // 配置路由
    routes: [
        {
            path: "/home",
            component: Home,
            meta: { show: true }  //meta是路由元，可以定义规则，比如Footer组件的显示与隐藏可以通过他来实现
        },
        {
            path: '/search/:keyword?',
            component: Search,
            meta: { show: true },
            name: "search",
            // 路由组件能不能传递props数据?
            // 布尔值写法:params  路由组件可以传递参数,只能传递params参数的值
            // props:true
            // 对象写法:额外的给路由组件传递一些props
            // props: {a: 1, b: 2}
            // 函数写法:可以params参数,query参数,通过props传递给路由组件
            props:($route)=>{
                return {keyword:$route.params.keyword,k:$route.query.k}
            }
        },
        {
            path: '/login',
            component: Login,
            meta: { show: false }
        },
        {
            path: '/register',
            component: Register,
            meta: { show: false }
        },
        // 重定向，在项目跑起来的时候，访问/，立马让他定到首页
        {
            path: '*',
            redirect: '/home'
        }
    ]
})

以上就是第一天的内容，各位大佬指教，视频笔记