一个简单 vue+webpack 的配置和demo 2018.1.15

第一步

1.2 前言

在我还在使用 requireJS 去管理模块化的 js 的时候，如今的前端三大框架 React Angular Vue 已经如火如荼。

这里我们来使用 ==webpack 和 vue==
来重构一下我们的代码，体验 MVVM 模式的乐趣。

image

1.2 什么是 vue ？

这里我们来比较一下常用的 jquery 和 vue 的区别

Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈jQuery是结构驱动，什么意思呢，以前我们写代码时常用$('.dom').text('我把值改变了')，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法直接就是this.msg="我改变了"，然后msg就会同步到某个结构上，视图管理抽象为数据管理，而不是管理dom结构了。

• vue 的核心思想就是 双向绑定 数据劫持。
  • 第一点：对数据进行劫持监听，设置一个数据监听器Observer，用来监听所有属性，如果有属性发生变化，就通知订阅者。
  • 第二点：设置一个订阅者Watcher，订阅者可以收到属性的变化通知，从而执行相应的函数，来进行视图更新。
  • 第三点：设置一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
  • 第四点：入口函数。

image

---

image

1.3 搭建环境

• 默认你安装了 npm (推荐使用 cnpm) 和 node

npm install -g vue-cli

• 然后进入一个自己的 demo 目录

vue init webpack myProject

webpack 作为打包工具会自动的处理你需要创建的 vue 项目，随后有几个选项。

image

这里的话，因为后面主要涉及了 router 这个选择 y 就可以 其他的不管或者默认回车就可以了。

• 最后 安装依赖(当然你可以在package.json中看看初始化的时候需要安装了那些依赖)
• 运行项目

cd myProject
npm install
npm run dev

• 然后看控制台提示，再打开 http://localhost:8080/#/
  
  

  image

如果你看到的不是这样的，或者报错。这个就需要看是哪一步遗忘或者错了。

1.4 代码目录详解

• 这是我们的代码目录

  
  
  

  image
  • package.json 依赖信息
  • config 保存一些项目初始化配置
  • build里面保存一些webpack的初始化配置
  • index.html是我们的首页
  • 最关键的代码都在src目录中

• src 目录

• main.js 入口文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //import => 文件引入
import App from './App'
import router from './router'

Vue.config.productionTip = false
// 设置为 false 以阻止 vue 在启动时生成生产提示。

/* eslint-disable no-new */
new Vue({
  el: '#app', 
  // 对应 app.vue页面的 id //最后效果将会替换页面中id为app的div元素
  router,
  // 路由设置
  template: '',
  // 告知页面这个组件用这样的标签来包裹着,并且使用它
  components: { App }
  // 组件的使用
})

• App.vue 主组件页面

看到我们文件内分为三大部分，分别是