一、前端进化
以前在学习使用原生 JS 写项目的时候，操作 DOM 是特别的不方便，但是写东西是特别的有成就感很锻炼自己技术。所以后来 JQuery 出现了，颠覆了原生成为 DOM 之王，但是也有不足，比如项目比较大的时候，整个 JS 和 HTML 分离，导致逻辑也比较混乱，接下来就出现了 MVC 用来规范代码程序，这段时间前端没什么大的技术更新出现了，作为补充出现了 模板引擎 以 mustache 语法为代表（2011年人们发明了模板引擎）。
- mustache 语法
{{ mustache }} ： http://mustache.github.io/ 作为一个前端看到这个网站的模板样式，我的内心是拒绝的。
然后我们进入 JavaScript 的模块：janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript https://github.com/janl/mustache.js
进入官网我们一起去做个案例感受一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mustache 语法体验</title>
</head>
<body>
<div id="app"></div>
<!-- 模板 -->
<script id="template" type="text/template">
<h1>{{head}}</h1>
<h3>{{author}}</h3>
<p>{{num1}}</p>
<p>{{num2}}</p>
<p>{{num3}}</p>
</script>
<script src = "./mustache.min.js"></script>
<script>
var JSON = {
"head" : "击壤歌","author" : "先秦：佚名","num1" : "日出而作，日入而息。","num2" : "凿井而饮，耕田而食。","num3" : "帝力于我何有哉！"
};
// 得到模板引擎
var template = document.querySelector("#template").innerHTML;
// 模板放入位置
var app = document.querySelector("#app");
// 解析模板
Mustache.parse(template);
// 放入模板
var rendered = Mustache.render(template, JSON);
// 模板上树
app.innerHTML = rendered;
</script>
</body>
</html>
这种 mustache 语法的思想已经接近我们现在前端最火的 MVVM 思想了，只不过在数据和视图方面仍然是分离的。而现在前端框架 react 和 Vue 最好用的原因，没有数据视图分离，放好 HTML 标签我们只需要去更改数据的变化视图自动也就跟着改变了。
今天我们学的就是 Vue 的起步。先来看一下引包的 Vue 和 mustache 是不是有异曲同工之妙。
-
Vue 引包玩法（2014 年 Vue 诞生）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mustache 语法体验</title>
<style>
table{
border-collapse:collapse;
}
td{
border: 2px solid #393;
width: 120px;
height: 20px;
text-align:center;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for = "item in arr">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
</script>
<script src = "./vue.min.js"></script>
<script>
new Vue({
el : "#app",
data : {
arr :[
{"id" : 0,"name" : "Condor Hero"},
{"id" : 1,"name" : "Condor Hero"},
{"id" : 2,"name" : "Condor Hero"},
{"id" : 3,"name" : "Condor Hero"},
{"id" : 4,"name" : "Condor Hero"},
{"id" : 5,"name" : "Condor Hero"},
{"id" : 6,"name" : "Condor Hero"},
{"id" : 7,"name" : "Condor Hero"},
{"id" : 8,"name" : "Condor Hero"},
{"id" : 9,"name" : "Condor Hero"}
]
}
})
</script>
</body>
</html>
对比发现 Vue 的好处了吧，只需学习少量的 API 就能做更多的事。其实 Vue 更加的组件化。
什么是组件化？简单来讲就是 HTML、CSS 、JS 、数据、逻辑、这五个要素写在一起。
接下来我们来配置 Vue 的 webpack 环境。
二、Vue 配置环境
Vue 的环境比较好配，全局三个包，项目只需要装五个 npm 包，想想 react 大约装了十六个包。
全局环境下安装：
npm install -g webpack webpack-cli webapck-dev-server
项目目录安装：
npm install --save css-loader style-loader vue vue-loader vue-template-compiler
- css-loader webapck 认识 css
- style-loader css 上树，进入 HTML 模板显示
- vue-loader 可以让 webpack 识别
.vue文件 - vue-template-compiler 可以让 webpack 处理 html 模板
- vue 实现 vue 的语法
接下来配置 webpack.config.js 文件，如果使用的是 vscode 编辑器可以，直接装VSCode 插件 “webpack”，按 ctrl+shift+p，呼唤出命令行，webpack create 输入，即可创建成功。
下面的是本人手动配置的。
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: "development", // "production" | "development" | "none"
// Chosen mode tells webpack to use its built-in optimizations accordingly.
entry: "./main.js", // string | object | array
// 这里应用程序开始执行
// webpack 开始打包
output: {
// webpack 如何输出结果的相关选项
publicPath: "virtual", // string
// 所有输出文件的目标路径
filename: "bundle.js", // string
// 「入口分块(entry chunk)」的文件名模板（出口分块？）
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain `.css` files
// AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
resolve: {
extensions: [".js", ".json", ".jsx", ".css",".vue"],
// 使用的扩展名
alias: {
'vue$': 'vue/dist/vue.esm.js' // node_modules/vue/dist里面的js文件非常多需要指定版本，用 'vue/dist/vue.common.js'
}
}
}
配置参考文档：
- vue-loader 官网 https://vue-loader.vuejs.org/guide/#manual-setup
- vue 官网 https://cn.vuejs.org/v2/guide/installation.html
- webpack 官网 Configuration | webpack https://webpack.js.org/configuration/
main.js 文件的内容
import Vue from "vue";
import App from "./App";
new Vue({
el:"#app",
render(h){
return h(App);
}
});
App.vue 文件的内容
<template>
<div>
<h1>Vue 的 hello world！</h1>
<table>
<tr v-for = "i in 9">
<td v-for = "j in 9" v-show="j < i">{{i}} * {{j}} = {{i * j}}</td>
</tr>
</table>
</div>
</template>
<script>
</script>
<style>
</style>
index.html 文件的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 学习</title>
</head>
<body>
<div id="app"></div>
<script src = "./virtual/bundle.js"></script>
</body>
</html>
这时我们打开 CMD 窗口输入 webpack-dev-server 命令，程序成功运行在 http://127.0.0.1:8080/ 我们会看到如下结果：
注意，如果跑项目有报 webpack/lib/** 的错误，请安装 npm install --save webpack 一下，把 webpack 安装在项目目录下，我的 win7 就报这种错。
网友评论