vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇

最好使用视频上的账号密码，13700000000 密：111111

最新服务端接口地址：http://gmall-h5-api.atguigu.cn

因为该账号数据库存有地址信息 。

但是注意，因为很多同学同时操作，所以可能出现：购物车商品被其他同学增加或减少，订单不能重复提交等问题。此时稍等一会，或多试几次即可。

学习尚硅谷的商城前台尚品汇项目的笔记：

脚手架使用

1、创建项目

vue create 项目名称

2、脚手架默认目录：

• node_modules：放置项目依赖的地方。
• public：一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面。
• src：程序员源代码文件夹：
  • assets：经常放置一些静态资源（公用的图片（即很多组件都用此图）），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）
  • components：一般放置非路由组件（如共用的组件）
• App.vue：唯一的根组件
• main.js：入口文件【程序最先执行的文件】
• babel.config.js：babel配置文件
• package.json：项目描述、项目依赖、项目运行
• README.md：项目说明文件

注意：

（放public中的图片，组件引用：images/1.png 组件的less中引用：url(/images/9.png);使用"/"作为根目录。 因为最后webpack打包，public中的图片原封不动打包到了images中，所以用绝对路径）

放assets中的图片，组件的html中引用：@/assets/2.png 组件的less中引用：~@/assets/7.png 因为assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面），所以用相对路径）

3、脚手架下载的项目稍微配置一下

• 1）浏览器自动打开

  ​ 在 package.json 文件中

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

• 2）关闭 eslint 校验工具，以防写代码时没错也报错。

  在根目录创建 vue.config.js 文件：需要对外暴露

  module.exports = {
     lintOnSave: false,
  }
  

• 3）src文件夹的别名的设置

  因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。

  就不用用那么多…/…/了。直接@代替。

  （js用@代替src路径，css用~@代替src路径）

  创建 jsconfig.json 文件

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

一、项目路由分析

路由组件：

Home首页、Search搜索、login登录、Refister注册

非路由组件：

Header头部、Footer底部 （有Home首页、Search搜索组件。无login登录、Refister注册组件）

二、Header、Footer非路由组件完成

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

需要用到less ，安装低版本，高版本容易出错。

yarn add less less-loader@5

（组件中，需要加