电商项目笔记1

开发环境

node 、webpack、vue脚手架、淘宝镜像

创建项目

1. 进入要创建项目的目录
2. 联网，在github拉取别人的脚手架默认项目、选择vue2

   vue create app 
   

项目目录说明

1. public： 静态资源，webpack原封不动打包到dist文件夹，不会当作一个模块打包到js文件
2. node_moudles: 项目依赖文件夹
3. src：源代码

• assert：放置多个组件公用的静态资源，webpack打包时当作模块打包到JS文件里

• components: 放置非路由组件（全局组件）

• App.vue :项目唯一的根组件（.vue文件）（安装代码片段自动生成结构）

• pacakge.json :记录项目信息，安装版本、依赖、怎么运行等等

• main.js :程序入口文件，项目中最先执行

    ```
    //完整写法  import Vue from "../node_modules/vue/dist/vue.js";
    // Vue是存在于vue.js中
    import Vue from 'vue'
  
    // 简写  import App from './App';
    // 引入我们写好的.vue文件。（.vue文件是vue框架的单文件组件。
    import App from './App.vue'
  
    //不显示提示信息（开发版本--上线版本）
    Vue.config.productionTip = false
  
    //创建一个vue对象 挂载到 public下的index.html 中的挂载点<div id="app"></div>
    new Vue({
      render: h => h(App),
    }).$mount('#app')
  
    ```
  

提前配置

1. 配置运行npm run serve命令后 ，浏览器自动打开
   "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },

2. 关闭eslint校验工具
   在项目根目录新建vue.config.js文件
   module.exports={ //关闭eslint校验 lintOnSave:false }

3. 设置src路径为@,方便定位路径：根目录新建jsconfig.json

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

项目路由分析：vue-router

1. 前端路由说明：键值对 Key--url value--组件

2. 路由组件： Home、Search、Login、Register组件
   components文件夹新建Header组件目录、Header下新建index.vue文件

3. 非路由组件 ：Hearder、Footer组件

4. Header：Home、Search、Login、Register
   Footer:Home、Search
   (通过v-if或v-show显示隐藏)

项目相关命令

1. 项目启动 ：进入所在项目目录，

   npm run serve
   

非路由组件创建及使用步骤(重要)

1. 创建： 组件放置在components文件下（Header下的index.vue）

• 组件结构（html-->template div标签）
• 组件样式(css-->style标签)
• 图片资源(images)

2. 引入(App.vue)

3. 注册(App.vue)

4. 使用(App.vue)

   <template>
     <div id="app">
   <!--    4.使用组件-->
       <Header></Header>
   
   <!--    在header和footer之间设置路由组件出口-->
       <router-view></router-view>
   
   <!--    设置在登录和注册时不显示组件根据组件上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏-->
   <!--    方法一-->
   <!--    <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>-->
   
   <!--    方法二-->
   <!--    在router/index.js下配置路由时同时设置路由元信息-->
       <Footer v-show="$route.meta.show"></Footer>
   
     </div>
   </template>
   
   <script>
   //2.创建完成Header组件后，在根组件引入Header
   import Header from "@/components/Header"
   import Footer from "@/components/Footer"
   
   export default {
     name: 'App',
     //3.注册组件(KV一致省略v)
     components: {
       Header,
       Footer
     }
   }
   </script>
   

路由组件创建及使用步骤(重要)

1. 前提需要安装vue-router

   cnpm install --save vue-router
   

2. Home路由组件创建： src/pages/Home/index.vue
   和非路由组件类似

3. 路由配置： src/router/index.js

   //index.js是配置路由文件
   //index.js相当于node的一个模块，须要让文件执行一次 即在main.js入口文件引入和注册路由
   
   //1.引入vue 和vue路由
   import Vue from "vue";
   import VueRouter from "vue-router";
   
   //2.vue路由是插件，需要使用
   Vue.use(VueRouter);
   
   //3.引入一级路由组件
   import Home from "../pages/Home";
   import Search from "../pages/Search";
   import Login from "../pages/Login";
   import Register from "../pages/Register";
   
   //4.配置路由 暴露路由
   // 写法二：const router = VueRouter.createRouter({
   export default new VueRouter({
       //routes单词注意
       routes:[
           {
               path:"/home",
               component:Home
           },
   
           {
               path:"/search",
               component:Search
           },
   
           {
               path:"/login",
               component:Login
           },
           {
               path:"/register",
               component:Register
           },
   
       ]
   })
   
   

4. main.js文件：引入路由、注册路由

   //完整写法  import Vue from "../node_modules/vue/dist/vue.js";
   // Vue是存在于vue.js中
   import Vue from 'vue'
   
   // 简写  import App from './App';
   // 引入我们写好的.vue文件。（.vue文件是vue框架的单文件组件。
   import App from './App.vue'
   
   //2.在router/index.js下配置路由后引入路由
   import  router from "./router"
   
   //不显示提示信息（开发版本--上线版本）
   Vue.config.productionTip = false
   
   //创建一个vue对象 挂载到 public下的index.html 中的挂载点<div id="app"></div>
   new Vue({
     render: h => h(App),
     //3.注册路由，kv一致省略v
     //注册路由后非路由组件和路由组件上都有$route和$router属性
     router
   }).$mount('#app')
   

非路由组件和路由组件区别

1. 放置位置
   非路由组件在components,路由组件在pages或views
2. 引入、注册等
   *非路由组件创建完要在根组件App.vue中引入、注册
   *路由组件创建完要在src/router/index.js中配置，在入口文件main.js中 引入、注册
3. 使用方式

• 非路由组件以标签形式在App.vue中使用

• 路由标签

  ```
  <template>
    <div id="app">
  <!--    4.使用组件-->
      <Header></Header>
  
  <!--    在header和footer之间设置路由组件出口-->
      <router-view></router-view>
  
  <!--    设置在登录和注册时不显示组件根据组件上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏-->
  <!--    方法一-->
  <!--    <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>-->
  
  <!--    方法二-->
  <!--    在router/index.js下配置路由时同时设置路由元信息-->
      <Footer v-show="$route.meta.show"></Footer>
    </div>
  </template>
  ```
  

$route和$router

• $route
  获取路由信息（路径、query、参数）
• $router
  编程式导航进行路由跳转
  push、replace

 //重定向，当项目启动时，访问/，立即定位到首页
        {
            path:"*",
            redirect:"/home"
        }

路由的跳转

点击登录、注册按钮等要进行路由的跳转，路由跳转有两种形式:声明式、编程式
声明式能做的编程式都能，编程还能实现一些其他业务逻辑
分析:如注册页面需要收集用户信息检验，跳转用编程式，点击登录页面仅需跳转过去，用声明简单

• 声明式导航 router-link标签 一定要有to属性

<!--router-link 声明式 设置路由跳转,保留类名-->
          <router-link class="logo" to="/home">
            <img src="./images/logo.png" alt="">
          </router-link>

• 编程式导航 push、replace
  <!-- 编程式设置路由跳转，goSearch--> <button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button>
  --
  methods:{ goSearch(){ //编程式跳转,this.$router.push() 可以通过修改url实现路由跳转 // 跳转且路由传参,传入params参数,query参数 this.$router.push("/search/"+this.keyword+"?"+"k="+this.keyword.toUpperCase()) } }

Footer组件的显示与隐藏

在登录，注册时隐藏

• v-if与v-show区别[https://www.jianshu.com/p/7af8554d8f08]

  ```
  <template>
    <div id="app">
  <!--    4.使用组件-->
      <Header></Header>
  
  <!--    在header和footer之间设置路由组件出口-->
      <router-view></router-view>
  
  <!--    设置在登录和注册时不显示组件根据组件上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏-->
  <!--    方法一-->
  <!--    <Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>-->
  
  <!--    方法二-->
  <!--    在router/index.js下配置路由时同时设置路由元信息-->
      <Footer v-show="$route.meta.show"></Footer>
  
    </div>
  </template>
  ```
  

路由传参

分析：需要在点击搜索时跳转搜索页面，且将搜索内容带过去

  ```
  <!--            v-model路由传参-->
              <input type="text" id="autocomplete" class="input-error input-xxlarge"  v-model="keyword"/>
  ```

---

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

1. params,属于路径中的一部分，在配置路由时需要占位。

2. query参数，不属于路径的 部分，不需要占位。

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

---

  methods:{
    goSearch(){
      //编程式导航
      // 路由传参第一种，字符串形式,params参数,query参数
      // this.$router.push("/search/"+this.keyword+"?"+"k="+this.keyword.toUpperCase())
      
      //路由传参第二种，模板字符串,用``不是引号
      // this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
      
      //路由传参第三种，对象。
      // 注意：使用这种方式传参，且有params参数，不能用path，需要给search路由个name
      this.$router.push({name:"search",params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})
    }
  }

*传参结果

面试问题

props

           //props用法
            //第一种：路由组件传递props
            // props:true

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

            // 第三种函数写法，最常用，可以params参数，query参数，通过props传递给路由组件
            props:($route)=>{
                return{
                    keyword:$route.params.keyword,k:$route.query.k

                };
            }

重写push和replace