webpack+Vue+ts+仿寫element-ui源碼2(持續更新)

時間 2020-03-25

標籤 webpack+vue+ts webpack vue element 源碼持續更新简体版

原文原文鏈接

你們好，我是robert，今天是用webpack從0開發一個ts版的element源碼的次日

做者：robert 倉庫地址:gitee.com/dawwdadfrf/…css

最近在學習element的源碼，想着學習element的時候來順便把webpack，css，ts方面的知識也學一學，由於是第一次分享，過程當中可能存在着不少的不足之處。請你們多多指教。本項目適用於小夥伴入門，文章將持續更新html

一.與git倉庫關聯，方便對咱們的代碼管理和保存，我用的碼雲

網址：gitee.com/vue

1.先在碼雲建立一個倉庫

2.輸入相應的內容(倉庫名稱，是否開源)

3.輸入完成以後點擊建立以後會跳到這樣一個頁面，此時倉庫創建完成

4.回到項目中，在本身的項目中輸入如下命令

git init
複製代碼

當前頁面在左邊會多了一堆3K+的東西。node

5.在本身的項目裏面新增長 .gitignore 文件意思是如下三部份內容不傳入倉庫，

node_modules/
dist/
package-lock.json
複製代碼

此時旁邊的圈住的個數變成了個位數了webpack

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內容 git

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 web

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中的內容都須要從新運行命令vue-cli

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',
複製代碼

變動爲npm

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文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。