尚品汇项目复盘（一）-阿里云开发者社区

尚品汇项目复盘（一）

2024-08-19 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 尚品汇项目复盘（一）

前言

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

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

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

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

其中xxx是指你的项目名称

（二）对目录进行分析

node_modules:放置项目依赖的地

public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

src：程序员源代码文件夹

而对于src目录里面的内容

api 发请求的
assets 经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
components 一般放置非路由组件（或者项目共用的组件）
mock 当后端请求还未完成时可以自己用mock来模拟数据
router 配置路由信息
store 用来进行vuex三连环
utils (目前为止学到的是可以用存放uuid的js文件)
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"
  }
]

尚品汇项目复盘（一）

前言

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

（二）对目录进行分析

（三）进行自定义配置

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

3.2 关闭eslint校验

3.3 配置跨域问题

（四）路由配置

4.1 yarn 安装路由

4.2引入路由

4.3路由的相关配置

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

尚品汇项目复盘（一）

前言

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

（二）对目录进行分析

（三）进行自定义配置

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

3.2 关闭eslint校验

3.3 配置跨域问题

（四）路由配置

4.1 yarn 安装路由

4.2引入路由

4.3路由的相关配置

热门文章

最新文章

相关电子书