Vue2电商前台项目（一）：项目前的初始化及搭建

一、项目初始化

创建项目：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}),