【vue2源码学习】— 准备工作

kyyius

已于 2023-02-26 17:57:45 修改

阅读量134

点赞数

分类专栏： vue 文章标签：学习 webpack javascript vue.js

于 2023-02-13 19:59:02 首次发布

本文链接：https://blog.csdn.net/kyyius/article/details/129008000

版权

vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文章介绍了如何从选择Vue.js的特定版本开始，通过npm安装依赖，打包Vue.js到dist目录，然后创建HTML页面引用打包后的Vue.js。接着，讨论了页面优化问题，特别是脚本加载顺序。最后，通过Webpack和相关插件实现项目自动化构建，包括热更新功能，以提高开发效率。

摘要由CSDN通过智能技术生成

1. 选择版本

链接: https://github.com/vuejs/vue
tag下选择版本代码(笔者选择的是2.6.11)
在这里插入图片描述

2. 安装依赖

在代码目录下使用命令
npm i

3.打包

使用 npm run dev 打包vue.js 到dist

4. 使用

在src的同级目录下新建一个html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div>小知识</div>
    <div>
      html的执行顺序是从上到下的
      所以head标签中的内容会先加载再执行
      那么就可能出现body没加载完，使head中的脚本访问不到dom的情况
      这种情况需要把脚本放在body底部,就能保证能访问到body的元素

      注意，样式和脚本浏览器需要不同的引擎处理
      遇到样式，样式引擎进行处理
      遇到脚本，停止样式引擎，用js引擎处理

      所以如何减少引擎的切换次数是一个页面优化方法
    </div>

  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      template: '<h1>Vue</h1>'
    })
  </script>
</body>
</html>

在这里插入图片描述
—分割----

5.优化

现在我们已经可以直接使用了
但是可以发现页面需要手动刷新一下才能拉取修改后的vue.js
下面我们来看怎么偷懒让他自己刷新

新建一个文件夹
把源码目录丢进去
npm init 生成package.json 文件
新建一个webpack.config.js文件
新建一个src文件夹
src下新建
index.js
index.html

在这里插入图片描述

由于webpack的插件等版本关系很多
笔者使用如下版本

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "4.0.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {}
}

下载对应版本的命令
npm i 包名@版本 -D
-D 开发依赖
-S 生产依赖

webpack.config.js
const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  // 详细plugins配置
  plugins: [
    new htmlWebpackPlugin({
      // 复制./src/index.html文件，并自动引入打包的所有资源
      template: './src/index.html',
      minify: {
          // 移除空格
          collapseWhitespace: true,
          // 移除注释
          removeComments: true
      }
    })
  ],
  devServer: {
    // 资源目录
    static: {
      directory: resolve(__dirname, 'dist'),
    },
    // 启动gzip压缩
    compress: true,
    port: 5555,
    // 自动打开默认浏览器
    open: true,
    // 热更新
    hot: true
  },
  mode: 'development'
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

// index.js
import Vue from '../vue2/dist/vue'
function A() {
  console.log('xxxy', Vue);
}
A()

在源码文件夹下使用
npm run dev
然后我们在根目录使用
npm run serve 即可打开

我们随便在源码里面打印些东西

在这里插入图片描述

至此准备工作完成

kyyius

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录