首页 > 其他分享 >Vue2电商前台项目(一):项目前的初始化及搭建

Vue2电商前台项目(一):项目前的初始化及搭建

时间:2024-04-03 23:30:42浏览次数:25  
标签:初始化 vue keyword params Vue2 组件 router 电商 路由

一、项目初始化

创建项目:sudo vue create app

1.项目配置

(1)浏览器自动打开

在package.json文件中,serve后面加上 --open

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

(2)eslint校验工具的关闭

在根目录下的vue.config.js加上:

module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint
  lintOnSave:false
})

(3)文件夹目录的简写方式,配置别名

就是不用再../找东西了,直接@代表src文件夹,在jsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

现在默认就是配好了的

二、项目的路由分析及搭建

1.项目的路由分析

vue-router
前端所谓路由:KV键值对。
key:URL(地址栏中的路径)
value:相应的路由组件
注意:项目上中下结构
路由组件:
Home首页路由组件、Search路由组件、login登录路由、Register注册路由非路由组件:
Header【在首页、搜索页】
Footer【在首页、搜索页】,但是在登录页面是没有

2.开发项目的步骤

(1)书写静态页面(HTML+CSS)
(2)拆分组件
(3)获取服务器的数据动态展示
(4)完成相应的动态业务逻辑

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

3.非路由组件的完成

静态页面组件的拆分Header、Footer组件,组件文件夹里分别放index.vue和images文件夹来存放组件用到的图片,最后在App.vue引入组件

安装能够使用less样式:终端输入npm i less-loader@6并且style语言lang设置为less

<style lang="less">

components文件夹就ok了

4.路由组件的搭建

路由组件Home、Search、login、Register组件放在pages文件夹里,分别创建四个文件夹,文件夹里创建一个index.vue

(1)配置路由

Vue2安装vue-router:npm i vue-router@3

首先新建一个router文件夹(src下),新建index.js文件,vue.router是vue的一个插件,我们得引入Vue和VueRouter然后use一下

router/index.js:

//配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'
//使用插件
Vue.use(VueRouter)
//引入路由组件
import Home from '../pages/Home'
import Login from '../pages/Login'
import Search from '../pages/Search'
import Register from '../pages/Register'
//配置插件
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:'/Home',
            component:Home,
        },
        {
            path:'/Register',
            component:Register,
        },
        {
            path:'/Login',
            component:Login,
        },
        {
            path:'/Search',
            component:Search,
        },
    ]
})

注意配置路由是routes不是routers!

(2)使用路由组件

回到入口文件main.js进行注册

//引入路由
import router from './router'

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

然后就能到App.vue当中使用了,写完router-view之后,你想找home路由组件的页面就直接在路径输入8080/#/home就可以显示了

<div>
    <Header></Header>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    <Footer></Footer>
  </div>

$route:一般获取路由信息【路径、query、params等等】
$router:一般进行编程式导航进行路由跳转【push|replace】

(3)路由组件与非路由组件的区别

1:路由组件一般放置在pages|views文件夹,非路由组件一般放置components文件夹中
2:路由组件一般需要在router文件夹中进行注册(使用的即为组件的名字),非路由组件在使用的时候,一般都是以标签的形式使用
3:注册完路由,不管路由路由组件、还是非路由组件身上都有$route、$router属性

(4)重定向

我们平时打开网页8080应该就得呈现首页。

当项目跑起来的时候,访问/,立马给它定向到首页

        {
            path:'*',// *或/都行
            redirect:"/home"
        },

(5)路由跳转的两种方式

声明式导航:router-link,可以进行路由的跳转
编程式导航:【push|replace】,可以进行路由跳转,声明式导航能做的,编程式导航都能做,但是编程式导航除了可以进行路由跳转,还可以做一些其他的业务逻辑。

声明式router-link:
            <!-- 声明式导航,得加to -->
            <router-link to="/login">登录</router-link>
            <router-link to="/register" class="register">免费注册</router-link>

原来用的是a标签,herf改为to,

编程式导航:比如说那个input表框,点击需要得到用户输入的信息传参什么的就用编程式
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">
            搜索
</button>
methods: {
      //搜索按钮的回调函数,需要向search路由进行跳转
      goSearch(){
        this.$router.push('/search')
      }
    },

三、Footer组件的显示和隐藏——路由元信息

登陆或者注册的时候底下的footer是没有的,显示或隐藏组件:v-if / v-show

v-show更好用,就是操作样式显不显示类似display,v-if会频繁的操作dom

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

App.vue:

<!-- 在home、search显示 -->
    <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>

但是如果要写的组件很多的话,这样就不太好了

2.路由元信息

就是那个meta,route里的属性是特定的不能自己命名

routes:[
        {
            path:'/Home',
            component:Home,
            meta:{show:true}
        },
        {
            path:'/Search',
            component:Search,
            meta:{show:true}
        },
<Footer v-show="$route.meta.show"></Footer>

四、路由传参

1.复习路由跳转的两种方式

(1)声明式导航:router-link(务必要有to属性),可以实现路由的跳转
(2)编程式导航:利用的是组件实例的$router.push|replace方法,可以实现路由的跳转。(可以书写自己的业务,业务完成之后再跳转)

2.路由传参的参数有几种写法?

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

(1)字符串形式

header/index.vue收集文本框的数据用v-model,给input表框加上

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

这个keyword是表单的数据,声明一下

data(){
    return{
      keyword:''
    }
  },

事件为点击之后把数据传过去,就得有个点击事件

         <button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch"
          >
methods: {
    //路由传递参数
    //第一种:字符串形式
    goSearch() {
       this.$router.push("/search/"+this.keyword)
    },
  },

数据是路由跳转传过来的,需要进行占位,index.js:(传的params参数)

        {
            path:'/search/:keyword',
            component:Search,
            meta:{show:true}
        },

传params参数和query参数(大写的):

goSearch() {
       this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase())
    },

(2)模版字符串

//模版字符串
this.$router.push(`/search/"${this.keyword}?k=${this.keyword.toUpperCase()}`)

(3)对象写法

注意:如果是路由跳转传参、传的还是对象,而且是params参数,就需要给路由命名

//对象写法
this.$router.push({
name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}
})

不能是path形式,得是name写法

3.路由传参的面试题

1:路由传递参数(对象写法)path是否可以结合params参数一起使用?

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

2:如何指定params参数可传可不传?

路由要求传递params参数,但是你就不传递params参数,发现一件事情,URL会有问题的
指定params参数可以传递、或者不传递,在配置路由的时候,在占位的后面加上一个问号【params可以传递或者不传递】

path:'/search/:keyword?'

不仅是params参数没有了,url也错了

如果占位后面加了?,url正确有search,就是params参数没有

3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决?

this.$router.push({
name:"search",params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}
})

传空串也会导致url错误

4:路由组件能不能传递props数据?

(1)布尔值

路由组件只能传props,而且只能传params参数

            name:'search',
            path:'/search/:keyword',
            component:Search,
            //布尔值写法:params
            props:true,
            meta:{show:true}

为true,把params参数作为路由组件身上的属性

传递了search就得接收,接收完之后可以直接在页面写{{keyword}}

props:['keyword']
(2)对象写法(用的也不多)
//对象写法
            props:{
                a:1,
                b:2
            },

(3)函数写法

可以把params参数、query参数,通过props传递给路由组件

//函数写法
            props:($route)=>{
                return {
                    keyword:$route.params.keyword,k:$route.params.k
                }
            },
            meta:{show:true}

简写方式把{}当函数体了,会报错

正确简写方式:

props:($route)=>({ keyword:$route.params.keyword,k:$route.params.k}),

标签:初始化,vue,keyword,params,Vue2,组件,router,电商,路由
From: https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/137202920

相关文章

  • Vue2.x指令
    Vue对于一些常用的页面功能进行了指令封装,这些指令可以以Html元素属性的方式使用。1.v-show指令v-show指令的作用是:根据指令中表达式的真假,来控制指令标签中内容的显示或隐藏。<!--dom对象:一个大的容器来使用我们的vue中的数据与方法--> <divid="app"> <!--Vue......
  • 视频号小店热度攀高,狼多肉少时代,腾讯真的会成为电商黑马?
    我是电商珠珠自从视频号发展电商视频号小店以来,一直在电商圈里炸锅。特别是从今年年初开始,对于商家来说目前的平台都在走下坡路,平台红利对于新手来说越来越少,所以商家开始寻找新的出路。目前,比较火的就是短视频电商平台,抖音小店和视频号小店这两种。先来说说抖音小店,抖音平台......
  • 华为 2023年4月19日 实习 机试第一题——批量初始化次数
    某部门在开发一个代码分析工具,需要分析模块之间的依赖关系,用来确定模块的初始化顺序,是否有循环依期等问题。“批量初始化”是指一次可以初始化一个或多个模块。例如模块1依赖模块2,模块3也依赖模块2,但模块1和3没有依赖关系,则必须先“批量初始化”模块2,再“批......
  • 淘宝扭蛋机开发:融合电商与娱乐,打造全新购物体验
    在数字化时代,电商平台的竞争愈发激烈,如何创新并提升用户体验成为了各大平台关注的焦点。淘宝扭蛋机的开发,正是淘宝平台在探索电商与娱乐结合的新模式上的一次大胆尝试,旨在为用户带来更加有趣、富有惊喜的购物体验。淘宝扭蛋机作为一种新型的购物方式,将传统的扭蛋机与电商购物......
  • 跨境电商怎么选择代理IP,跨境电商怎么选择IP代理,跨境电商的看过来,避免被坑
    跨境电商在选择代理IP或IP代理时,确实需要谨慎,以避免遇到各种潜在问题。以下是一些关键的步骤和建议,帮助您在购买和使用代理IP时避免被坑:明确业务需求:首先,要清楚地了解自己的业务需求,比如是用于市场调研、数据分析、广告投放还是其他目的。根据业务需求,确定所需的IP类型(如......
  • 推荐几个好用的电商API接口(淘宝天猫丨京东1688商品详情数据接口)
    电商API接口主要用于帮助开发者将电商功能集成到自己的应用程序中,实现诸如商品检索、商品价格数据获取、订单处理、物流跟踪等功能。以下是一些常用的电商API接口提供商:一、主流电商平台API:淘宝开放平台:提供淘宝、天猫、1688等阿里巴巴集团旗下的电商平台接口,用于商品检索、......
  • 跨境电商新纪元:独立站系统,让您的品牌飞跃国际舞台
    在全球化的大潮中,跨境电商已不再是新鲜事物,而是众多企业实现品牌国际化、拓展市场份额的重要战略手段。然而,如何在竞争激烈的国际市场中脱颖而出,成为众多跨境电商企业面临的难题。今天,我要为大家介绍的,正是这样一个能够助您轻松打破地域限制,实现品牌飞跃的利器——独立站系统。......
  • 【建议收藏】阿里巴巴1688专业术语大全,电商运营必备
    PV:全称PageView,即页面访问量,每打开一次页面PV计数+1。UV:全称UniqueVisitor,指独立访客访问数,一台电脑终端为一个访客。SKU:SKU是指一款商品,每款都有一个SKU,便于电商品牌识别商品。一款商品多色,则是有多个SKU;例:一件衣服,有红色、白色、蓝色。GMV:交易金额。BSR:1688买家服务......
  • 【全开源】运营版JAVA商城小程序APP公众号源码-单商户PC源码多商户源码社交电商源码_
    运营版JAVA商城小程序APP公众号源码-单商户PC源码多商户源码社交电商源码:构建智慧商业新生态在数字化浪潮的推动下,智慧商业正成为新时代的发展趋势。为满足广大商家的需求,我们隆重推出运营版JAVA商城小程序APP公众号源码,涵盖单商户PC源码、多商户源码以及社交电商源码,助力您轻......
  • js 可以间接地“声明”或初始化变量的其他方式(除了直接使用var、let和const)
    在JavaScript中,除了直接使用var、let和const关键字来声明变量外,还有一些其他方式可以间接地“声明”或初始化变量。以下是一些示例:函数参数:当定义一个函数时,函数的参数列表中的每个参数实际上都会成为该函数作用域内的变量。这些变量在函数被调用时会被自动声明和初始化。func......