Vue 配置环境和实现 hello world！

一、前端进化

以前在学习使用原生 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

进入官网我们一起去做个案例感受一下：

这种 mustache 语法的思想已经接近我们现在前端最火的 MVVM 思想了，只不过在数据和视图方面仍然是分离的。而现在前端框架 react 和 Vue 最好用的原因，没有数据视图分离，放好 HTML 标签我们只需要去更改数据的变化视图自动也就跟着改变了。

今天我们学的就是 Vue 的起步。先来看一下引包的 Vue 和 mustache 是不是有异曲同工之妙。

• Vue 引包玩法（2014 年 Vue 诞生）

  
  
  

    
    
    


    

        

            

                
{{item.id}}
                
{{item.name}}
            
        
    
    
    
    

对比发现 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", //入口文件

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

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

    },

    module: {
        rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                // this will apply to both plain `.css` files
                // AND `

index.html 文件的内容

这时我们打开 CMD 窗口输入 webpack-dev-server 命令，程序成功运行在 http://127.0.0.1:8080/ 我们会看到如下结果：

注意，如果跑项目有报 Cannot find module 'webpack/lib/RuleSet' 的错误，请安装 npm install --save webpack 一下，把 webpack 安装在项目目录下，我的 win7 就报这种错。