在公司做了几个月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 init3.本地安装webpack 和 webpack-cli
//之前也全局安装了
cnpm i webpack webpack-cli -D4.本地安装 babel-loader 和 babel-core
cnpm i babel-loader babel-core -D
//再安装可以转换ES2015的插件
cnpm i babel-preset-env -D5.新增 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