通過 Vue 學習筆記01 —— 開發環境搭建 我們創建了一個 my-project。我們需要對項目的結構進行了解才能更好的進行 vue 項目的開發。
項目結構
Snip20171206_5.png
1. 項目結構分析
-
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 會掛載到 index.html 的 <div id="app"></div> app.vue 中的所有內容都會顯示到 <div id="app"></div> 中 --> <div id="app"></div> <!-- built files will be auto injected --> <!-- 編譯的文件將會自動注入 --> </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. // 導入 vue.js 庫 import Vue from 'vue' // 導入 App.vue 文件（組件） // 一個 .vue 就是一個組件 import App from './App' // 導入路由配置 // 路由主要負責是單頁面的跳轉 import router from './router' // 配置提示 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ // 掛載的元素節點 （vue 對象會被掛載的是id === app 的元素上） el: '#app', // 使用路由 // router = router, 這個和下面的代碼是等價的 router, // 模板 // 模板的內容會替換掛載的元素 // <div id="app"></div> === <App><App/> template: '<App/>', // 注冊組件 // 注冊組件后，就可以在模板中使用 <App></App> 組件 // 注冊的組件只能使用在模板中 components: { App } }) -
app.vue
<template> <div id="app"> <!-- 公共元素（路由切換后還會存在的元素, 可以通過后面的示例加深理解）--> <img src="./assets/logo.png"> <!-- 渲染路由視圖： helloworld.vue 組件就渲染在 router-view 視圖中 --> <router-view/> </div> </template> <script> export default { name: 'app' // 下面的是由 webpack 完成的。 默認情況下不需要寫。 // 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
路由主要在單頁面應用用進行界面跳轉的。// 導入 vue.js import Vue from 'vue' // 導入 vue-router.js import Router from 'vue-router' // 導入 helloworld.vue 組件 import HelloWorld from '@/components/HelloWorld' // 啟用路由 Vue.use(Router) export default new Router({ routes: [ { // 路由路徑 // http://localhost:8080/# 路徑訪問的是 hellowrold 界面 path: '/', // 路由名稱 name: 'Hello', // 注冊 helloworld 組件 component: HelloWorld } ] })
2. 項目架構
- 加載過程
Snip20171206_10.png
- 頁面渲染結果
Snip20171206_12.png
