一个简单 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

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

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: '<App/>',
  // 告知页面这个组件用这样的标签来包裹着,并且使用它
  components: { App }
  // 组件的使用
})
  • App.vue 主组件页面
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

看到我们文件内分为三大部分,分别是<template><script><style>,很好理解结构,脚本,样式;script就像node一样暴露一些接口,可以看到我们的template标签中除了一张图片之外就只有一行代码:<router-view></router-view>

  • router/index.js (路由配置)
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

推荐阅读更多精彩内容

  • 《脱下军装还是个兵》歌词 应朋友之约,为建军90周年写首关于军人的歌词,几夜构想写出《脱下军装还是个兵》送给我当过...
    号子1113阅读 273评论 1 1
  • “怜悯”的意思是对遭遇不幸的人表示同情。 生活中的人,在街头看到一个衣衫褴褛的乞丐会心生怜悯;听闻他人遭遇不幸会...
    董姑凉阅读 1,160评论 0 3