Webpack+babel+Vue.js+element前端知識筆記
在公司做了幾個月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