Vue2_尚品汇前端项目day01超详细笔记_尚硅谷

pomelo-

已于 2023-05-13 16:30:16 修改

阅读量554

点赞数 3

分类专栏： # Vue2前端项目文章标签： vue.js 前端框架前端 Powered by 金山文档

于 2023-03-06 15:43:49 首次发布

本文链接：https://blog.csdn.net/weixin_50637054/article/details/129359995

版权

Vue2前端项目专栏收录该内容

13 篇文章 3 订阅

订阅专栏

Vue2_尚品汇前端项目Gitee地址

https://gitee.com/pomelol/shangpinhui-front-end-project

Vue2_尚品汇后台项目Gitee地址

https://gitee.com/pomelol/shangpinhui-backend-project

项目运行命令

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

node + webpack + 淘宝镜像

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

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

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

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

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

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

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

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

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

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

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

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

README.md：说明性文件

2：项目的其他配置

2.1项目运行起来的时候，让浏览器自动打开：可添加--open

---package.json文件

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

若打开网页为0.0.0.0，如图

需要再添加 --host=localhost ,如：

  "scripts": {
    "serve": "vue-cli-service serve --open --host=localhost",
    "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配置别名@提示【@代表的是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为主，主要搞业务、逻辑

在开发项目的时候：

1：书写静态页面（HTML +CSS）

2：拆分组件

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

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

注意1：创建组件的时候，组件结构 + 组件的样式 + 图片资源

注意2：咱们项目采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装5或者6版本】进行处理less，把less样式变为css样式，浏览器才可以识别。

注意3：如果想让组件识别less样式，需要再style标签的身上加上lang="less"

<style scoped lang="less"></style>

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

-创建或者定义

-引入

-注册

-使用

<template>//App.vue文件
  <div>
    <!-- 使用 -->
    <Header></Header>
  </div>
</template>

<script>
//引入
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: '',
  //注册
  components:{
    Header,
    Footer
  }
}
</script>

5）路由组件的搭建

（cnpm install --save vue-router 安装的为4版本：对应Vue3使用）

（cnpm install --save vue-router@3 安装的为3版本：对应Vue2使用）

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

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

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

5.1配置路由

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

//配置路由的地方(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"
        }
    ]
})

（在入口文件main.js进行注册）

//main.js文件
import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router';

new Vue({
  render: h => h(App),
  //注册路由：底下的写法KV一致省略v【router小写的】
  //注册路由信息：当这里书写router的时候，组件身上都拥有$route,$router属性
  router
}).$mount('#app')

（根组件App.vue进行展示）

//App.vue文件
<template>
  <div>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
  </div>
</template>

5.2总结

路由组件与非路由自己的区别？

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

2：路由组件一般需要再router文件夹中注册（使用的即为组件的名字，非路由组件在使用的时候，一般都是以标签的形式使用

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

$route：一般获取路由信息【路径、query、params等等】

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

（ push和replace区别：能不能记录历史记录。push跳转会形成history,可返回到上一层;而replace跳转不会形成history,不可返回到上一层）

5.3 路由的跳转？

路由的跳转有两种形式：

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

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

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

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

6）Footer组件显示与隐藏

6.3 显示或者隐藏组件：v-if | v-show（提倡使用v-show）

（v-if：操作DOM元素）

（v-show：通过样式display控制）

Footer组件：在Home、Search显示Footer组件

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

6.2 配置路由的时候，可以给路由添加路由元信息【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元素
        },
]

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

<template>//App.vue文件
  <div>
    <!-- 在Home、Search显示的，在登录、注册隐藏 -->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

8）路由传参

8.1：路由跳转有几种方式？

比如：A->B

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

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

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

8.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>

9）路由传参相关面试题

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

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

methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {

this.$route.push({path:'/serch',params:{keyword:this.keyword},
                                 query:{k:this.keyword.toUpperCase()}});
    },
  },

2：如何指定params参数可传可不传？

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

如果路由要求传递params参数，但是你就不传递params参数，发现一个问题，URL会有问题，如图。

http://localhost:8080/#/?k=QWE （错误）

如何指定params参数可以传递、或者不传递，

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

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

methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {

this.$router.push({name:'search',query:{k:this.keyword.toUpperCase()}});
    },
  },

http://localhost:8080/#/search?k=QWE （正确）

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

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

methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() { 

            传递空串会出现路径问题 http://localhost:8080/#/?k=QWE  （错误）
 //使用undefined解决：params参数可以传递、不传递（空的字符串）
this.$router.push({name:'search',params:{keyword:''||undefined},
                                       query:{k:this.keyword.toUpperCase()}});
    },
  },

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

答：可以的：三种写法

<script>
export default {
  name: "",
  data() {
    return {
      keyword: "",
    };
  },
methods: {
    //搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {

//可以的：三种写法
this.$router.push({name:"search",params:{keyword:this.keyword},
                                   query:{k:this.keyword.toUpperCase()}})
    },
  },

第1种：布尔值写法:params （路由组件只能传props而且是params参数）

//配置路由（router文件夹->index.vue）
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:"/home",
            component: Home,
            meta:{show:true}//添加meta元素
        },
        {
            path:"/search/:keyword?", 需要占位 /:keyword  在占位的后面加上一个问号【params可以传递或者不传递】 
            component: Search,
            meta:{show:true},
            name:"search",  第三种：对象（常用）路由跳转传参需要起名字
            //路由组件能不能传递props数据？
            //1、布尔值写法:params  （路由组件只能传props而且是params参数）
            props:true,       
            }
        },
]

<template>  <!-- Search文件夹->index.vue文件 -->
  <div>
      <h1>params参数--{{$route.params.keyword}}==={{keyword}}</h1> <!--更常用 -->
      <h1>query参数--{{$route.query.k}}==={{k}}</h1>
  </div>
</template>

<script>
export default {
  name:'',
  //路由组件可以传递props 
  props:['keyword']

}
</script>

第2种：对象写法：额外给路由组件传递一些props

//2、对象写法：额外给路由组件传递一些props
            props:{a:1,b:2},

<script>    <!-- Search文件夹->index.vue文件 -->
export default {
  name:'',
  //路由组件可以传递props 
  props:['keyword','a','b']
}
</script>

第3种：函数写法：可以把params参数、query参数，通过props传递给路由组件（常用）

//3、函数写法：可以把params参数、query参数，通过props传递给路由组件（常用）
            props:($route)=>{
                return ({keyword:$route.params.keyword,k:$route.query.k})
            }

<script>    <!-- Search文件夹->index.vue文件 -->
export default {
  name:'',
  //路由组件可以传递props 
  props:['keyword','k']
}
</script>

(快捷键）

(alt +shift + f 格式快捷键)

(ctrl + c 终止cmd运行)

(ctrl + s 保存)

(ctrl + / 单行注释)

pomelo-

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue2_尚品汇前端项目day01超详细笔记_尚硅谷

Vue_尚品汇前端项目day1详细笔记_尚硅谷
复制链接

扫一扫

专栏目录