Vuex源码学习笔记 - Vuex开发运行流程(二)

在上一篇笔记中:Vuex源码学习笔记(一)

我们从Github上找到了Vuex的源码,并clone了到本地,接着大致了解了每个文件夹的所存放的代码的作用,Vuex项目的架构也十分的整洁清晰,一目了然。最后我们使用npm run dev命令运行起了Vuex的项目。

今天我们将从npm run dev命令开始,来探究Vuex的开发的流程

注意:我们需要切换到4.0分支,本期主要分析Vuex4源码,也就是Vue3配套使用的Vuex。

首先我们可以从package.json文件看到:

"scripts": {
   
   
	"dev": "node examples/server.js",
	...
}

npm run dev命令实际就是使用node运行了examples文件夹下的server.js文件

我们先来看server.js文件:

const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const WebpackConfig = require('./webpack.config')

const app = express()
const compiler = webpack(WebpackConfig)

app.use(webpackDevMiddleware(compiler, {
   
   
  publicPath: '/__build__/', // 发布目录
  stats: {
   
   
    colors: true, // 是否以不同的颜色输出
    chunks: false // 是否添加关于chunk的信息。设置为false更少输出。
  }
}))

app.use(webpackHotMiddleware(compiler))

// Step1: 设置当前目录为静态目录
app.use(express.static(__dirname))

// Step2: 如果没有匹配到静态文件则跳转到首页
app.use((req, res, next) => {
   
   
  res.redirect('/')
})

const port = process.env.PORT || 8080
module.exports = app.listen(port, () => {
   
   
  console.log(`Server listening on http://localhost:${
     
     port}, Ctrl+C to stop`)
})

注意,此webpack使用的版本为4.x版本,现在最新的webpack为5.x版本。

webpack主要有三种开发模式,分别为:

  1. webpack的watch模式
  2. webpack-dev-server
  3. webpack-dev-middleware

这个server.js文件使用的就是webpack的webpack-dev-middleware开发模式。

然后使用express启动一个本地服务器,访问http://localhost:8080,将会打开根目录的examples文件夹下的index.html文件,打开http://localhost:8080/composition/counter,将会打开composition/counter下的index.html文件。

image-20211120210917339

然后我们打开composition/counter下的index.html文件可以看到:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuex counter example</title>
    <link rel="stylesheet" href="/global.css">
  </head
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值