webpack+Vue+ts+仿写element-ui源码2(持续更新)

528 阅读4分钟

大家好,我是robert,今天是用webpack从0开发一个ts版的element源码的第二天


作者:robert 仓库地址:gitee.com/dawwdadfrf/…

最近在学习element的源码,想着学习element的时候来顺便把webpack,css,ts方面的知识也学一学,因为是第一次分享,过程中可能存在着很多的不足之处。请大家多多指教。本项目适用于小伙伴入门,文章将持续更新


一.与git仓库关联,方便对我们的代码管理和保存,我用的码云

网址:gitee.com/

1.先在码云创建一个仓库

2.输入相应的内容(仓库名称,是否开源)

3.输入完成之后点击创建之后会跳到这样一个页面,此时仓库建立完成

4.回到项目中,在自己的项目中输入以下命令

    git init

当前页面在左边会多了一堆3K+的东西。

5.在自己的项目里面新增加 .gitignore 文件 意思是以下三部分内容不传入仓库,

node_modules/
dist/
package-lock.json

此时旁边的圈住的个数变成了个位数了

6.依次输入以下命令(以下命令不要直接复制我的,查看第3步骤里码云点创建完成后对应的内容)

git add .
git commit -m "[feature]第一次提交"
git remote add origin **********************
git push -u origin master

7.如果大家到了这一步说明,本地仓库与线上仓库就建立了联系了。此时可以去码云里面看看是否有代码。


二. 让项目可以像vue-cli脚手架一样运行起来。

1.安装webpack-dev-server

npm install --save-dev webpack-dev-server

2.配置package.json文件

"scripts": {
    "dev": "webpack-dev-server --watch -inline --progress  --config build/webpack.config.js",
    "build": "webpack --config build/webpack.config.js"
  },

3.配置webpack.config.js文件

devServer: {
    host: '127.0.0.1',
    port: 8085,
    publicPath: '/',
    hot: true,
    stats: 'errors-only'
},

4.运行刚刚配置好的命令

  npm run dev

5.在浏览器中运行网址: http://127.0.0.1:8085/

运行后发现页面中现在是这样一个目录,下一个部分就是带大家在页面中展示对应的html内容

6.将代码保存的码云仓库

git add .
git commit -m '[feature]webpack服务安装成功'
git push

7.此时webpack.config.js的内容为

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, '../dist')
    },
    devServer: {
      host: '127.0.0.1',
      port: 8085,
      publicPath: '/',
      hot: true
    },
}

8.package.json的内容为

{
  "name": "share-ui",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --watch -inline --progress  --config build/webpack.config.js",
    "build": "webpack --config build/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

温馨提示: 第二部分内容只对package.json和webpack.config.js里的文件做了修改


三.设置启动页面

1.安装html模版依赖包

npm install --save-dev webpack-dev-server

2. 在根目录下创建一个文件examples文件夹

3. 在examples文件夹里创建index.tpl文件(是一个模版文件,我直接复制的element源码里的)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Element - The world's most popular Vue UI framework</title>
    <meta name="description" content="Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库" />
  </head>
  <body> 
    <div id="app"></div>
  </body>

</html>

4.目录结构为

5.在webpack.config.js文件新增以下内容

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

 plugins: [
      new HtmlWebpackPlugin({          
        template: './examples/index.tpl',
    })
 ]

6.重新运行 npm run dev

提示每次修改完webpack.config.js中的内容都需要重新运行命令

7.将代码发送到仓库

git add .
git commit -m '[feature]引入html模版'
git push

8.webpack.config.js最终内容为

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

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, '../dist')
    },
    devServer: {
      host: '127.0.0.1',
      port: 8085,
      publicPath: '/',
      hot: true
    },
    plugins: [
      new HtmlWebpackPlugin({           //打包生成新的html文件
        template: './examples/index.tpl',
      })
    
    ]
}

四. 接下来我们引入vue文件

1.安装插件

npm install vue
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler

2.在examples目录下面创建文件app.vue文件

<template>
    <div>
        {{name}}
    </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            name: '嘿嘿嘿'
        }
    }
}
</script>

3.在examples目录下面创建文件main.js文件

import Vue from 'vue';
import entry from './app.vue'
new Vue({
    el: "#app",
    render: h => h(entry)
  })

4.此时项目的目录结构为

5.webpack.config.js新增以下内容

 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
 },
 plugins: [
    new VueLoaderPlugin(),
  ]

6. 修改webpack.config.js的入口文件

 entry: './src/index.js',

变更为

 entry: './examples/main.js',

7.此时webpack.config.js代码为

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
  module.exports = {
    entry: './examples/main.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, '../dist')
    },
    devServer: {
      host: '127.0.0.1',
      port: 8085,
      publicPath: '/',
      hot: true
    },
    plugins: [
      new HtmlWebpackPlugin({           //打包生成新的html文件
        template: './examples/index.tpl',
      }),
      new VueLoaderPlugin(),
    
    ],
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        }
      ]
   },
}

8.重新启动webpack服务 npm run dev 浏览:http://127.0.0.1:8085/

9.如果页面出现嘿嘿嘿三个字则vue引入成功

10.将代码发送到仓库

git add .
git commit -m '[feature]引入vue文件'
git push

以上内容如有遗漏错误,欢迎留言 ✍️指出,一起进步💪💪💪

如果觉得本文对你有帮助,🏀🏀留下你宝贵的 👍


上一篇: webpack从0到打包的实现

下一篇: js文件改写为ts文件