基于VueCli自定义创建项目2 & vant组件库 & 案例的小细节

创建

Babel/Router/Vuex/ Css/Linter

Vue2.x

VueRouterhash模式

CSS预处理Less

ESlint:Standard & Lint on Save

配置文件dedicated configfiles

调整初始化目录目标

将目录调整成符合企业规范的目录

删除多余的文件

assets/logo.png

components/HelloWorld.vue

views/AboutView.vue

views/HomeView.vue

修改路由配置和 App.vue

路由

import Vue from'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter ({
    routes:[]
})

export default router

app.vue

<template>
    <div id="app">
        <router-view />
    </div>
</template>

<style lang="less">

</style>

src文件夹下 新增两个文件夹 api 和 utils
- api接口模块：发送ajax请求的接口模块
- utils工具模块：自己封装的一些工具方法模块

vant组件库

第三方Vue组件库 vant-ui （vue2 vant2，vue3 vant4）：

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

其他 Vue 组件库：

PC端：element-ui (element-plus) ant-design-vue

移动端：vant-ui MintUI (饿了么) CubeUI(滴滴）

vant 官网有快速上手教程

全部导入对开发比较方便

全部导入

按需导入对性能较好

按需导入

项目中的 vw 适配

基于postcss插件实现项目vw适配

在官网的进阶用法有详细说明

安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

根目录 新建 postcss.config.js 文件，填入配置

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
        // vw适配的标准屏的宽度iphoneX
        //设计图750，调成1倍=>适配375标准屏幕
        // 设计图640，调成1倍=>适配320标准屏幕
      viewportWidth: 375,
    }
  }
}

项目大起来后，每一个组件最好新建成一个文件夹

request模块 - axios封装

使用 axios 来请求后端接口，一般都会对 axios 进行一些配置（比如：配置基础地址，请求响应拦截器等) 所以项目开发中,都会对 axios 进行基本的二次封装，单独封装到一一个request模块中，便于维护使用

文档：Axios 实例 | Axios中文文档 | Axios中文网 (axios-http.cn)

安装axios

yar add axios

新建reguest模块

utils 目录下新建request模块
创建实例&配置导出实例

reguest模块

import axios from 'axios
// 创建 axios 实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的axios实例
const instance = axios.create({
  baseURL: '接口调用基地址',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

//自定义配置 - 请求/响应 拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  })

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么（写多个.data,默认axios会多包装一层data,需要响应拦截器中处理一下)）
    return response.data;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  })


//导出配置好的实例
export default instance

测试使用

import request from '@/utils/request'

export default{
    created(){
        request.get('/captcha/image')
    }

api 接口模块

将一些代码封装成方法，统一存放到 api 模块里，使用时导入调用

响应拦截器

响应拦截器是拿到数据的第一个数据流转站，可以在里面统一处理错误

如，在发送请求时，预期：希望如果响应的status非200，最好抛出一个promise错误，await只会等待成功promise

import {Toaset} from 'vant'
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  })

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么（写多个.data,默认axios会多包装一层data,需要响应拦截器中处理一下)）
    return response.data;
    if (res.status !== 200){
        // 给提示
        Toast(res.message)
        
        // 给一个错误的promise
        return Promise.reject(res.message)
    }
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  })

路由导航守卫

全局前置守卫

所有的路由一旦被匹配到，都会先经过全局前置守卫（无论访问哪一个，都会先经过前置守卫）
只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

router.beforeEach((to, from, next) => {
  // 1. to   往哪里去， 到哪去的路由信息对象 （路径，参数）
  // 2. from 从哪里来， 从哪来的路由信息对象（路径，参数）
  // 3. next() 是否放行
  //    如果next()调用，就是放行
  //    next(路径) 拦截到某个路径页面
})

to.path 不包含查询参数
to.fullPath 包含查询参数

@change

是Vue的内置指令之一，作用于诸如文本框、单选按钮、复选框等表单元素中，用来监测表单元素内容的变化，并将变化后的值作为参数传递给相应的方法。

如果希望，跳转到登录=〉登录后能回跳回来，需要在跳转去携带参数（当前的路径地址）

this.$route.fullPath（会包含查询参数）

this.$router.replace()

this.$router.replace()
// 和 push，不同的是，push是累积前进，而 replace 是替换，如果点返回，页面不一样

getters 内拿到其他 getters

第二个参数

getters;{
    selCount (state,getters){
        getters.其他getters名
    }
}

既希望保留原本的形参，又需要通过调用函数传参 => 箭头函数包装一层

@input="(value) => changeCount(value, item.goods_id, item.goods_sku_id)"

mixins

混入

编写的就是Vue组件实例的配置项，通过一定语法，可以直接混入到组件内部（data methods computed 生命周期函数）

注意点：

如果此处和组件内，提供了同名的 data 或 methods，则组件内优先级更高
如果编写了生命周期函数，则mixins中的生命周期函数和页面的生命周期函数，会用数组管理统一执行

src文件夹下新建mixins文件夹

export default {
    created(){
        
    }
    data(){
    
    }
    methods:{
        
    }
    ...
}

组件内导入

import loginConfirm from '@/mixins/文件名'

打包

vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线

参与上线的是 => 打包后的源代码

打包：

将多个文件压缩合并成一个文件
语法降级
less sass ts 语法解析, 解析成css
....

打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！

打包命令

根目录下

yarn build

在项目的根目录会自动创建一个文件夹dist,dist中的文件就是打包后的文件，只需要放到服务器根目录中即可。

如果不是服务器根目录，则需要配置publicPath

配置publicPath

vue.config.js中配置

module.exports = {
  publicPath: './'
}

路由懒加载

访问到对应的路由了，才加载解析这个路由对应的所有组件

异步组件改造

原来

import 组件名 from '@/views/prodetail'

改为

const 组件名 = () => import('@/views/prodetail')