Vue实战项目案例的注意事项

头条案例

我们新建项目的时候，多加上一个选项 router ，然后构建完成之后，src 里面会有两个文件夹 components 和 views 两个文件夹

如果某个组件是通过路由来实现动态展示和切换的组件放在 views 文件夹里面；如果不是通过路由展示和切换，而且是可复用的组件的话，就放在 components 文件夹里面

Vant 组件

安装

通过 npm 安装 （我们这里选用的方式）

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

引入组件

方式一. 自动按需引入组件 ( 推荐 )

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

方式二. 手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件

(由于我们是刚刚开始接触，而且前两种并不是那么的方便，我们这里使用这种方式------实际开发中我们，一般也是使用这种方法，虽然体积会很大，但是导入方便，操作也快，而且在我们后期的发布阶段的时候，vant 还是阔以被优化掉的)

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
// 安装组件库
import Vant from 'vant';
// 安装组件库的 css 文件
import 'vant/lib/index.css';

//使用组件
Vue.use(Vant);

Tips: 配置按需引入后，将不允许直接导入所有组件。

修改第三方组件的默认样式

方式一：直接在浏览器中查看我们要修改元素的类名或者 id 名，直接书写css 代码来进行更改

来更改我们可能会碰到一些 我们直接对其类里面的样式进行更改，有的时候会不起作用，这时候就需要我们在 在该选择器前面加上 deep 关键字，才能够生效

  /deep/ .van-nav-bar__title{
    color: white;
  }

方式二：通过组件官方进行主题定制

axios 请求数据

为了提高我们代码的复用以及操作的方便，我们一般是将请求操作进行一个封装，我们创建一个 utils 目录，然后这些工具什么的都可以放到这个目录里面，比如说下面的这个封装模块

request1.js

import axios from 'axios'

const axios_son = axios.create({
	baseURL: 'http://api.taobao.com'
})

export default axios_son

在使用组件的时候，如果某个属性名是“小驼峰”的形式，则绑定属性的时候，建议给改写成“连字符”格式，例如：

cmtCount  可以写成  cmt-count

但是在组件内的话，应该是怎样定义就怎样使用，如果是组件外，尤其是 使用 props 传值的时候，我们定义的自定义属性的属性名为 cmtCount ，我们在调用该组件通过该自定义属性进行传值的时候，就可以使用 cmt-count 进行传值（当然用原来的名字也是可以的）

Vant 中的 List 列表

介绍

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

引入

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

基础用法

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <!-- 下面的这一部分，是包裹的部分-要实现下拉加载的内容 -->
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

下拉刷新

List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果。(在外面再包一层)

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

定制主题

介绍

Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格（命名的时候字符之间使用 “-” 间隔），方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。

样式变量

Vant 使用了 Less 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。

下面是所有的基础样式变量，组件的颜色变量请参考各个组件的文档或配置文件。

定制方法

步骤一 引入样式源文件

定制主题时，需要引入组件对应的 Less 样式文件（我们之前使用默认的样式文件的时候，是在 main.js 文件里面调用的 index.css 文件，我们这里调用其 less 文件，只有这样我们在这里进行的设置才能够将 css 里面的原本的内容进行覆盖掉），支持按需引入和手动引入两种方式。

按需引入样式（推荐）

在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式。

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        // 指定样式路径
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

手动引入样式

// 引入全部样式
import 'vant/lib/index.less';

// 引入单个组件样式
import 'vant/lib/button/style/less';

步骤二 修改样式变量

如果是我们自己配置的 webpack ：采用本方法：使用 Less 提供的 modifyVars 即可对变量进行修改，下面是参考的 webpack 配置。

// webpack.config.js
module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        // ...其他 loader 配置
        {
          loader: 'less-loader',
          options: {
            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
            lessOptions: {
              modifyVars: {
                // 直接覆盖变量
                // 由于这种方法，我们是直接对配置文件进行修改，但是我们知道，如果对配置文件进行修改，那么如果我们想我们新设置的内容生效就要重启服务器，
                'text-color': '#111',
                'border-color': '#eee',
                // 下面的这种方法的话，我们不需要重启服务器就可以使得我们修改的内容生效
                // 或者可以通过 less 文件覆盖（文件路径为绝对路径）--我们写的文件里面的内容会将官方的 Vant 的 less 内容进行覆盖
                hack: `true; @import "less 文件的绝对路径";`,
              },
            },
          },
        },
      ],
    },
  ],
};

比如说 我们创建了一个 theme.js 文件

// 在这个less 文件里面覆盖官方的 less 变量值
@blue: #007bff;

// 覆盖 Navbar 的less 样式
@nav-bar-background-color: @blue;

在这个 配置文件里面调用

// webpack 底层使用的就是 node.js 进行构建的；因此，在 vue.config.js 中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const fullPath = path.join(__dirname, './src/theme.less')
// ....... (下面使用的反单引号进行变量的调用)
hack: `true; @import "${fullPath}";`

（下面的这个 vue-cli 搭建的项目，里面的配置和 上面的 webpack 的配置的 设置是一样的。）

如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置（没有该文件的话，直接新建就行了，注意是在项目根目录里面进行新建）。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

项目打包和发布

对于我们的这个 vue 项目，我们在控制台执行 npm run build 的时候，系统会自动给我们生成一个 dist 文件夹，里面是我们所写的 Vue 代码所生成的网页源代码

但是，我们会发现，如果我们直接在 文件资源管理器 中直接双击相应的 index.html 文件的话，我们是打不开的

原因分析：默认情况下，我们运行 npm run build 的时候，打包生成的 dist ，里面的这些文件只能发布到服务器上，只能通过 http 或https 协议打开，但是在我们直接双击的时候，我们在浏览器中打开的默认是以 file 协议访问的，所以是打不开的，我们看不到任何的效果，

要实现在 file 协议下面，也可以打开的话，我们就需要对该项目进行以下配置（配置之后，重新执行 npm run build 打包生成）

在我们的 vue config.js 文件里面有一个配置项 publicPath （具体用法如下）

publicPath

• Type: string

• Default: '/' -----> 只支持 http 和 https 协议打开

  部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

  默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

  这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

我们进行如下配置 (把改属性的值改为 ‘./’ 或者说 置空 都可以)

// vue.config.js

moudle.exports={
  publicPath: './'
  // 省略了其他的配置信息
}