第一步
1.2 前言
在我還在使用 requireJS 去管理模塊化的 js 的時(shí)候，如今的前端三大框架 React Angular Vue 已經(jīng)如火如荼。
這里我們來使用 ==webpack 和 vue==
來重構(gòu)一下我們的代碼，體驗(yàn) MVVM 模式的樂趣。
1.2 什么是 vue ？
這里我們來比較一下常用的 jquery 和 vue 的區(qū)別
Vue就是和jQuery一樣是一個(gè)前端框架，它的中心思想就是數(shù)據(jù)驅(qū)動(dòng)，像遠(yuǎn)古時(shí)代的老前輩jQuery是結(jié)構(gòu)驅(qū)動(dòng)，什么意思呢，以前我們寫代碼時(shí)常用$('.dom').text('我把值改變了')，這種寫法先要獲得結(jié)構(gòu)，然后再修改數(shù)據(jù)更新結(jié)構(gòu)，而Vue的做法直接就是this.msg="我改變了"，然后msg就會(huì)同步到某個(gè)結(jié)構(gòu)上，視圖管理抽象為數(shù)據(jù)管理，而不是管理dom結(jié)構(gòu)了。
- vue 的核心思想就是 雙向綁定 數(shù)據(jù)劫持。
- 第一點(diǎn)：對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽，設(shè)置一個(gè)數(shù)據(jù)監(jiān)聽器Observer，用來監(jiān)聽所有屬性，如果有屬性發(fā)生變化，就通知訂閱者。
- 第二點(diǎn)：設(shè)置一個(gè)訂閱者Watcher，訂閱者可以收到屬性的變化通知，從而執(zhí)行相應(yīng)的函數(shù)，來進(jìn)行視圖更新。
- 第三點(diǎn)：設(shè)置一個(gè)指令解析器Compile，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)。
- 第四點(diǎn)：入口函數(shù)。
1.3 搭建環(huán)境
- 默認(rèn)你安裝了 npm (推薦使用 cnpm) 和 node
npm install -g vue-cli
- 然后進(jìn)入一個(gè)自己的 demo 目錄
vue init webpack myProject
webpack 作為打包工具會(huì)自動(dòng)的處理你需要?jiǎng)?chuàng)建的 vue 項(xiàng)目，隨后有幾個(gè)選項(xiàng)。
這里的話，因?yàn)楹竺嬷饕婕傲?router 這個(gè)選擇 y 就可以 其他的不管或者默認(rèn)回車就可以了。
- 最后 安裝依賴(當(dāng)然你可以在package.json中看看初始化的時(shí)候需要安裝了那些依賴)
- 運(yùn)行項(xiàng)目
cd myProject
npm install
npm run dev
- 然后看控制臺(tái)提示，再打開 http://localhost:8080/#/
image
如果你看到的不是這樣的，或者報(bào)錯(cuò)。這個(gè)就需要看是哪一步遺忘或者錯(cuò)了。
1.4 代碼目錄詳解
-
這是我們的代碼目錄
image- package.json 依賴信息
- config 保存一些項(xiàng)目初始化配置
- build里面保存一些webpack的初始化配置
- index.html是我們的首頁
- 最關(guān)鍵的代碼都在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
// 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
/* eslint-disable no-new */
new Vue({
el: '#app',
// 對(duì)應(yīng) app.vue頁面的 id //最后效果將會(huì)替換頁面中id為app的div元素
router,
// 路由設(shè)置
template: '<App/>',
// 告知頁面這個(gè)組件用這樣的標(biāo)簽來包裹著,并且使用它
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>
看到我們文件內(nèi)分為三大部分，分別是<template><script><style>，很好理解結(jié)構(gòu)，腳本，樣式；script就像node一樣暴露一些接口，可以看到我們的template標(biāo)簽中除了一張圖片之外就只有一行代碼：<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
}
]
})
