通過(guò) Vue 學(xué)習(xí)筆記01 —— 開(kāi)發(fā)環(huán)境搭建 我們創(chuàng)建了一個(gè) my-project彤枢。我們需要對(duì)項(xiàng)目的結(jié)構(gòu)進(jìn)行了解才能更好的進(jìn)行 vue 項(xiàng)目的開(kāi)發(fā)辐烂。
項(xiàng)目結(jié)構(gòu)
Snip20171206_5.png
1. 項(xiàng)目結(jié)構(gòu)分析
-
index.html
Snip20171206_6.png<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-project</title> </head> <body> <!-- 查看 main.js 源碼可知 app.vue 會(huì)掛載到 index.html 的 <div id="app"></div> app.vue 中的所有內(nèi)容都會(huì)顯示到 <div id="app"></div> 中 --> <div id="app"></div> <!-- built files will be auto injected --> <!-- 編譯的文件將會(huì)自動(dòng)注入 --> </body> </html> -
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. // 導(dǎo)入 vue.js 庫(kù) import Vue from 'vue' // 導(dǎo)入 App.vue 文件（組件） // 一個(gè) .vue 就是一個(gè)組件 import App from './App' // 導(dǎo)入路由配置 // 路由主要負(fù)責(zé)是單頁(yè)面的跳轉(zhuǎn) import router from './router' // 配置提示 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ // 掛載的元素節(jié)點(diǎn) （vue 對(duì)象會(huì)被掛載的是id === app 的元素上） el: '#app', // 使用路由 // router = router, 這個(gè)和下面的代碼是等價(jià)的 router, // 模板 // 模板的內(nèi)容會(huì)替換掛載的元素 // <div id="app"></div> === <App><App/> template: '<App/>', // 注冊(cè)組件 // 注冊(cè)組件后摧莽，就可以在模板中使用 <App></App> 組件 // 注冊(cè)的組件只能使用在模板中 components: { App } }) -
app.vue
<template> <div id="app"> <!-- 公共元素（路由切換后還會(huì)存在的元素, 可以通過(guò)后面的示例加深理解）--> <img src="./assets/logo.png"> <!-- 渲染路由視圖： helloworld.vue 組件就渲染在 router-view 視圖中 --> <router-view/> </div> </template> <script> export default { name: 'app' // 下面的是由 webpack 完成的雄妥。 默認(rèn)情況下不需要寫(xiě)培己。 // template: template } </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> -
路由
router/index.js
路由主要在單頁(yè)面應(yīng)用用進(jìn)行界面跳轉(zhuǎn)的索抓。// 導(dǎo)入 vue.js import Vue from 'vue' // 導(dǎo)入 vue-router.js import Router from 'vue-router' // 導(dǎo)入 helloworld.vue 組件 import HelloWorld from '@/components/HelloWorld' // 啟用路由 Vue.use(Router) export default new Router({ routes: [ { // 路由路徑 // http://localhost:8080/# 路徑訪問(wèn)的是 hellowrold 界面 path: '/', // 路由名稱 name: 'Hello', // 注冊(cè) helloworld 組件 component: HelloWorld } ] })
2. 項(xiàng)目架構(gòu)
- 加載過(guò)程
Snip20171206_10.png
- 頁(yè)面渲染結(jié)果
Snip20171206_12.png
