尚品汇项目复盘（一）

前言

使用vue开发时 可以简单总结为四个步骤

1. 写静态样式
2. 发请求
3. vuex进行三连环 actions mutations state
4. dispatch获取内容 进行页面内容的渲染

（一）如何使用脚手架创建一个项目

使用Win+R 输入CMD 打开资源管理器

其中xxx是指你的项目名称

（二）对目录进行分析

node_modules:放置项目依赖的地
public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面
src：程序员源代码文件夹
而对于src目录里面的内容

1. api 发请求的
2. assets 经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
3. components 一般放置非路由组件（或者项目共用的组件）
4. mock 当后端请求还未完成时可以自己用mock来模拟数据
5. router 配置路由信息
6. store 用来进行vuex三连环
7. utils (目前为止学到的是可以用存放uuid的js文件)
8. views 页面展示的内容

（三）进行自定义配置

3.1 项目运行，浏览器自动打开

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

3.2 关闭eslint校验

根目录下创建vue.config.js,进行配置

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

3.3 配置跨域问题

根目录下创建vue.config.js,进行配置

  // 配置代理跨域问题
  devServer: {
    proxy: {
      'api': {
        target: 'http://gmall-h5-api.atguigu.cn',
      }
    },
  }
})

其中 target：‘xxx’是你所调用接口的地址

（四）路由配置

4.1 yarn 安装路由

输入指令 yarn add vue-router
之后在src目录下创建router目录 创建两个js文件

4.2引入路由

在main.js页面中

import router from '@/router'
new Vue({
  render: h => h(App),
  // 注册路由相关信息 名字和值一致时可以简写
  router,
}).$mount('#app')
 

4.3路由的相关配置

其中index.js文件的内容为

import Vue from'vue'
import VueRouter from'vue-router'
 
Vue.use(VueRouter)
import routes from './routes'

// 每当点击两次搜索按钮的时候 就会报错
// 原因是因为push||replace方法
// 此时需要自己手写一个push||replace方法
let oringPush = VueRouter.prototype.push;
let oringReplace = VueRouter.prototype.replace;
// 此时重写push||replace
// 第一个参数是告诉push方法 你往哪里跳转
VueRouter.prototype.push = function(location,resolve,reject) {
  // 当resolve 和 reject 存在的时候 即第一次点击的时候
  if(resolve && reject){
    oringPush.call(this, location, resolve, reject)
  }else {
    oringPush.call(this, location, ()=>{},()=>{})
  }
}

VueRouter.prototype.replace = function(location,resolve,reject) {
  // 当resolve 和 reject 存在的时候 即第一次点击的时候
  if(resolve && reject){
    oringReplace.call(this, location, resolve, reject)
  }else {
    oringReplace.call(this, location, ()=>{},()=>{})
  }
}
//此时 push||replace方法遇到连续点击两次就不会报错了

export default new VueRouter({
  routes,
  // 滚动行为 控制刚进页面时的页面初始状态位置
  scrollBehavior () {
    return { x: 0, y: 0 } 
  }
})

在index.js中进行了
import Vue from ‘vue’：导入Vue.js核心库。
import VueRouter from ‘vue-router’：导入Vue Router库。
Vue.use(VueRouter)：将Vue Router插件注册到Vue中，使其成为Vue的一部分。
import routes from ‘./routes’：从./routes路径导入路由配置对象。
然后重写了replace和push方法 目的是防止连续进行push/replace方法时会进行报错
而scrollBehavior的作用为：定义路由切换时页面的滚动行为，这里设置为每次路由切换后页面滚动到顶部。防止在进行路由跳转的时候 页面位置不定
在routes.js文件中 就是进行引组件 配置组件内容
例如：

import Home from '@/views/Home/index.vue'
import Search from '@/views/Search/index.vue'
import Register from '@/views/Register/index.vue'
import Login from '@/views/Login/index.vue'
import Detail from '@/views/Detail/index.vue'
import AddCartSuccess from '@/views/AddCartSuccess'
import ShopCart from '@/views/ShopCart'
export default
[
  // 在这里配置路由
  {
    path: "/home",
    component: Home,
    meta: { show: true }
  },
  {
    path: "/login",
    component: Login,
    meta: { show: false }
  },
  {
    path: "/register",
    component: Register,
    meta: { show: false }
  },
  {
    path: "/search/:keyword?",
    component: Search,
    meta: { show: true },
    name: 'search'
  },
  {
    path: "/detail/:skuisd",
    component: Detail,
    meta: { show:true}
  },
  {
    path: "/shopcart",
    name:'ShopCart',
    component: ShopCart,
    meta: { show:true}
  },
  {
    path: "/addcartsuccess",
    name:'addcartsuccess',
    component: AddCartSuccess,
    meta: { show:true}
  },
  {
    path: "/",
    redirect: "/home"
  }
]