Webpack+babel+Vue.js+element前端知識筆記

阿新 • • 發佈：2018-11-08

在公司做了幾個月Java後端開發,但近年來前端技術發展喜人,想學Vue.js+Element-UI+ES6+Webpack這些技術。
這篇當教程看還不合格，很多地方不詳細，知識點在官方教程裡，這篇只能當我自己的筆記。

目標

學習參照網上開源專案做一個後臺管理系統的頁面。

學習人

鼕鼕 2018-06-01開始每週記錄一點點

《Webpack教程筆記》

npm知識可以學習如下教程
http://javascript.ruanyifeng.com/nodejs/npm.html
https://www.npmjs.com.cn/

檢視npm是否安裝成功

npm -v

設定淘寶NPM映象,提高下載速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

新建資料夾webpack_demo,並按住Shift鍵右擊,選擇開啟命令視窗

這裡寫圖片描述

新增package.json檔案

npm init用來初始化生成一個新的package.json檔案。它會向用戶提問一系列問題，如果你覺得不用修改預設配置，一路回車就可以了,加上-y,則跳過提問階段。

npm init -y

本地安裝webpack 和 webpack-cli

cnpm install --save-dev webpack
cnpm install -- 
save-dev webpack-cli
//上面2個命令簡寫
cnpm i webpack webpack-cli -D

新增其他檔案如下圖,src為原始檔夾,dist是目標資料夾

這裡寫圖片描述

dist/index.html

<!doctype html>
<html>
    <head>
        <title>Hello www.pigg.vip</title>
    </head>
    <body>
        <div id='root'>
        </div> 

        <script src="./main.js"></script>
    </body>
</html>

src/index.js

const greeter = require('./greeter');

document.querySelector("#root").appendChild(greeter());

src/greeter.js

module.exports = function() {
    let greet = document.createElement('div');
    greet.textContent = "Hi www.pigg.vip";
    return greet;
}

package.json

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1"
  }
}

執行命令webpack,dist資料夾裡生成main.js
這裡寫圖片描述
直接開啟index.html,出現如下頁面

雖然頁面執行沒問題,但是上面命令列出現了warning,看看啥意思,參考官網

《ES6教程筆記》

從14年開始在上家公司幹活的時候,基本用jQuery,對JavaScript只懂皮毛,一個js檔案沒有結構,沒有模組化,很混亂。哪哪都是function,然後到處呼叫。我記得在上家公司負責鳥巢專案新增門票頁面，js檔案一開始有兩千多行，後來再怎麼優化合並公共方法還是有1500行以上。後來這個js都不敢改，每次改功能都很小心翼翼的，這個只能說明當時我的js水平真的很低階。今年看了公司專案的原始碼，有很多語法不懂，比如export 與 import，所以重新開始學習js還是很有必要的。對於ES6我目前想學的是模組化，babel的使用，別的新特性等用到的時候參考阮一峰老師的教程就行了。
Babel中文官方地址

全域性安裝babel-cli（不推薦）

cnpm i babel-cli -g

本地安裝babel-cli（推薦）

cnpm i babel-cli -D

安裝好babel-cli後，node_modules資料夾裡會有很多babel的包，包括babel-core

package.json檔案如下，新增”build”: “babel src -d dist”

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.1"
  }
}

在src資料夾下放入測試的js檔案profile.js

let firstName = '王';
let lastName = '哥';
let year = 2018;

let addNum = function (x, y) {
    return x + y;
};

export {firstName, lastName, year, addNum};

執行命令

npm run build

這裡寫圖片描述
從圖上看，src裡的檔案都轉譯好放入dist裡了，去dist裡看下，居然沒有變，還是ES6的程式碼

看了阮一峰老師的教程後，發現是Babel 的配置檔案.babelrc,這個沒有配置，這應該第一步就該弄的。

安裝好babel-loader和babel-preset-env外掛

cnpm i babel-loader -D
cnpm i babel-preset-env -D

新建.babelrc檔案

第一種方式：新建一個TXT檔案，然後重新命名為 .babelrc. ,注意前後各有一個點
第二種方式：cmd進入命令列，輸入 type nul>.babelrc

.babelrc檔案

{
    "presets": ["env"]
}

再次執行命令 npm run build，dist資料夾下的profile.js內容變成轉譯後ES5的語法了^_^

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
var firstName = '王';
var lastName = '哥';
var year = 2018;

var addNum = function addNum(x, y) {
    return x + y;
};

exports.firstName = firstName;
exports.lastName = lastName;
exports.year = year;
exports.addNum = addNum;

這麼弄完後，其實我對webpack和babel的理解更加暈了，他們是怎麼樣的關係？在實際開發中是如何配合使用的呢？下面來重新學習webpack+babel整合。

重新學習webpack+babel整合

1.babel是用來把大多數瀏覽器不支援的ES6程式碼轉譯成ES5程式碼
2.webpack是將多個js檔案（babel轉譯過的非ES6的程式碼）或者圖片等打包成一個檔案

1.新增專案資料夾webpack_babel

2.建立package.json檔案

npm init

3.本地安裝webpack 和 webpack-cli

//之前也全域性安裝了
cnpm i webpack webpack-cli -D

4.本地安裝 babel-loader 和 babel-core

cnpm i babel-loader babel-core -D
//再安裝可以轉換ES2015的外掛
cnpm i babel-preset-env -D

5.新增 webpack.config.js ， .babelrc 等等檔案

src是原始檔夾，dist是webpack打包目的資料夾
這裡寫圖片描述

index.html

<!doctype html>
<html>
    <head>
        <title>Hello www.pigg.vip</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script charset="utf-8" src="./main.js"></script>
    </body>
</html>

profile.js

let firstName = '王';
let lastName = '哥';
let year = 2018;

let addNum = function (x, y) {
    return x + y;
};

export {firstName, lastName, year, addNum};

index.js

import {firstName, lastName, year, addNum} from './profile';

let name = `${firstName} ${lastName}`;
console.log(name);

let greet = document.createElement('div');
greet.textContent = "hello www.pigg.vip";
document.querySelector("#root").appendChild(greet);

.babelrc

{
    "presets": ["env"]
}

webpack.config.js

const resolve = require('path').resolve

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      }
    ]
  }
}

package.json

{
  "name": "webpack_babel",
  "version": "1.0.0",
  "description": "good good study",
  "main": "index.js",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":  "webpack --mode development",
    "build":"webpack --mode production"
  },
  "author": "dong.wang",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "detect-indent": "^5.0.0",
    "to-fast-properties": "^2.0.0",
    "trim-right": "^1.0.1",
    "webpack": "^4.10.2",
    "webpack-cli": "^3.0.2"
  }
}

6.執行打包命令

執行npm run dev命令打包，如果有異常說缺少包，就先安裝它

這裡寫圖片描述

《Element教程筆記》

1 安裝

npm安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用

cnpm i element-ui -S

2 快速上手

引入Element

完整引入

在 main.js 中寫入以下內容：

import Vue from 'vue';//Vue引入在前
import ElementUI from 'element-ui';//element-ui引入在Vue之後
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';//自己的程式碼引入在最後

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

n
pm init
cnpm i vue -S
cnpm i element-ui -S
cnpm i webpack -D
cnpm i webpack-cli -D

npm init

cnpm i vue -S

cnpm i element-ui -S

cnpm i webpack -D

cnpm i webpack-cli -D

npm

解決 npm 安裝速度慢的問題

npm install –registry=https://registry.npm.taobao.org

Webpack+babel+Vue.js+element前端知識筆記

目標

學習人

《Webpack教程筆記》

檢視npm是否安裝成功

設定淘寶NPM映象,提高下載速度

新建資料夾webpack_demo,並按住Shift鍵右擊,選擇開啟命令視窗

新增package.json檔案

本地安裝webpack 和 webpack-cli

新增其他檔案如下圖,src為原始檔夾,dist是目標資料夾

《ES6教程筆記》

全域性安裝babel-cli（不推薦）

本地安裝babel-cli（推薦）

安裝好babel-loader和babel-preset-env外掛

新建.babelrc檔案

重新學習webpack+babel整合

1.新增專案資料夾webpack_babel

2.建立package.json檔案

3.本地安裝webpack 和 webpack-cli

4.本地安裝 babel-loader 和 babel-core

5.新增 webpack.config.js ， .babelrc 等等檔案

index.html

profile.js

index.js

.babelrc

webpack.config.js

package.json

6.執行打包命令

《Element教程筆記》

1 安裝

npm安裝

2 快速上手

引入Element

完整引入

按需引入

相關推薦