Vue 配置环境和实现 hello world！-CFANZ编程社区

一、前端进化

以前在学习使用原生 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 更加的组件化。

接下来我们来配置 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 指定 Vue 的版本
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", //入口文件

    output: {
      // 输出的文件名
      filename: "bundle.js", 

      publicPath: "virtual"
      // 输出解析文件的目录，url 相对于 HTML 页面

    },

    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'
                    ]
                }
        ]
    },
    resolve: {
        // 引用省略文件的后缀名
        extensions: [".js", ".json", ".jsx", ".css",".vue"],
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // node_modules/vue/dist里面的js文件非常多需要指定版本，用 'vue/dist/vue.common.js'
        },
        mainFiles: ["index","Index"] //打开文件夹下面的index开始的文件
    },
    plugins: [
        // make sure to include the plugin!
        new VueLoaderPlugin()
    ]
}

配置参考文档：

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/ 我们会看到如下结果：