前端技术分享WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一

最近要做一些关于前端的技术分享，我们先开始从vue技术的基础开始分享

前言

2020.9.19vue3技术正式发布了，前端的童鞋又要开始一波新的学习了，大家一起加油哦！

首先我们来针对vue项目的编写开始

目录结构分析

首先先看一下目录结构：

src -- 源码目录
├── api -- axios网络请求定义
├── assets -- 静态图片资源文件
├── commmon -- 通用js函数
├── components -- 通用组件封装
├── router -- vue-router路由配置
├── store -- vuex的状态管理
├── utils -- 工具类方法(包括一些axios的分类)
└── page -- 前端页面
    ├── home
    ├── error -- 错误页面
	├	├── 403
	└──	└──  404

webpack基础知识

在项目中我们需要配置webpack,先来了解一下webpack的基本知识：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
context: context即是项目打包的路径上下文，如果指定了context,那么entry和output都是相对于上下文路径的，contex必须是一个绝对路径

Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。每找到一个 Module，就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //每个入口是一个代码块
  entry: './src/index.js',//入口

  output: {//出口
  	//path只能是绝对路径,不能是相对路径
    path: path.resolve(__dirname, 'dist'),//打包后的文件保存在哪个目录
    filename: 'bundle.js',//打包后的文件名
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: [
          path.resolve(__dirname, 'src')// 只命中src目录里的js文件，加快 Webpack 搜索速度
        ],
        use: 'babel-loader',// 用 babel-loader 转换 JavaScript 文件
      },
    ],
  },

  // 代码模块路径解析的配置
  resolve: {
  	// 配置 Webpack 去哪些目录下寻找第三方模块，默认是只会去  node_modules  目录下寻找
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')
    ],
	//在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。  resolve.extensions 用于配置在尝试过程中用到的后缀列表
    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
  },

  plugins: [
    new HtmlWebpackPlugin({
    	filename:'index.ssr.html', // html的名字
      	template: __dirname + "/app/index.tmpl.html",//new 一个这个插件的实例，并传入相关的参数
        minify:false, // 不压缩
        //...
    })
  ],
    
}

vue中路由的使用

new Vue({
    router:router,
    store,
    render: h => h(App)
}).$mount('#app');

路由懒加载的方式

1.vue异步组件技术 ==== 异步加载

vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
}

2.webpack提供的require.ensure()

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}

3.es提案的import()

const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
{
  path: '/about',
  component: About
}

vue中的axios的全局配置

import axios from 'axios'
Vue.prototype.$axios=axios

接着我们可以在util方法工具中对axios进行二次封装

import axios from 'axios'
const service = axios.create({
	timeout: 15000, // 请求超时时间
	withCredentials: true, // 是否允许带cookie这些
	headers: {
		"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
	}
})
//添加请求拦截器，在发送请求之前做些什么
service.interceptors.request.use(
	config => {

		return config;
	},
	err => {

		return Promise.reject(err);
	}
);
service.interceptors.response.use(
	response => {
		// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
		// 否则的话抛出错误
		if (response.status === 200 && response.statusText === "OK") {

					return response;

		}
    return response;
    
	// 服务器状态码不是2开头的的情况
	//后台开发人员协商好统一的错误状态码
	// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
	error => {
    if (error && error.response) {
        switch (error.response.status) {
          case 401:
            
           

           break;

          
        }
    }

		return Promise.reject(error.response.data) // 返回接口返回的错误信息
	}
);

export function get(url, params) {
	return new Promise((resolve, reject) => {
        service.get(url,{params})
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {

            reject(err.data)
        })
    });
}

vuex的基本使用

Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。

Vuex 是单向数据流的一种实现。

单向数据流的使用场景

多个组件会共享状态时，共享状态和组件间（兄弟组件）通信变的不容易。我们把共享状态抽取出来，用单向数据流的方式会变得容易。如果是页面进行传参，我们可以使用query和parmar进行传参；

在src文件目录下新建store>index.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
　　state:{
　　　　name:"初始的name"
　　},
　　getters:{
　　　　// 第一个参数是state,第二个是getters
　　　　dealName(state,getters){
　　　　　　return "处理一下的name,值为："+state.name
　　　　}
　　},
　　mutations:{
　　　　// 第一个参数是state,第二个参数为提交载荷，emmm，赋值的新值
　　　　setName(state,payload){
　　　　　　　state.name = payload
　　　　}
　　},
　　actions:{
　　　　// 第一个参数为对象，与store 实例具有相同方法和属性的 context 对象，第二个参数与mutation一样
　　　　setNameAction({commit},payload){
　　　　　　commit("setName",payload)
　　　　}
　　}
})/

vue组件化的思想

组件化是vue的核心思想，主要是为了代码重用。

常用的组件间的通信方式

父子组件传值props和$emit(常用)

//父组件
<child :message="message" v-on:getChildData="getChildData"></child>
export default{
	data(){
    	return{
        	message:'父组件'
        }
    },
    methods:{
    	getChildData(val){
           console.log(val)
        }
    }
}

//子组件

<div type="text" :mymessage="mymessage" @click="passData(mymessage)"> </div>
export default{
	data(){
    	return{
        	 mymessage:this.message
        }
    },
    props:{
    	message:{
        	type: String,
          	default: () => {
          		return ''
          	}
        }
    },
    methods:{
    	this.$emit('getChildData',this.mymessage)
    }
    
}

' $attrs'和'$ listeners'

中央事件总线（非父子组件间通信）

v-model

provide和inject

$parent和$ children

vuex

好了，今天就先介绍到这了，谢谢大家的观看，共同加油！

前端技术分享

前言