文章目錄
- vue項目結構
- vue請求頁面執行流程
- main.js
- router
- HelloWorld.vue
- App.vue
- index.html
vue項目結構
config目錄存放的是配置文件，比如index.js可以配置端口
node_modules存放的是該項目依賴的模塊，這些依賴的模塊在package.json中指定
src目錄分析
1.assets目錄存放資源，比如圖片、js
2.components目錄存放自定義組件
3.router目錄存放的是路由文件
4.App.vue文件是項目的主體單頁，這里顯示路由視圖
5.main.js核心文件，入口js，這里創建vue實例，并且指定el，router，component，template
index.html是項目首頁
這里定義了一個div id=app
package.json指定項目依賴的模塊，類似java maven項目的pom.xml
vue請求頁面執行流程
HelloWorld.vue
index.js
App.vue
main.js
index.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.
import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})main.js解讀
1.入口js
2.創建了vue實例
3.指定了el 掛載到id=app的div
4.指定router 從router目錄引入
5.指定components引入組件，該組件是import App
6.指定template:<App/> 這里App是從components {App}
7.進入路由，找到路由文件 router/index.js同時得到url
http://localhost:8080/#/ 得到path /
router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}]
})router/index.js解讀
1.創建Router對象 當作的組件
2.routes:[] 路由表，可以指定多個路由（就是一個訪問路徑）
3.請求url http://localhost:8080/#/ 得到 path /
4.對應找到 component:HelloWorld.vue
HelloWorld.vue
<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><ahref="https://vuejs.org"target="_blank">Core Docs</a></li><li><ahref="https://forum.vuejs.org"target="_blank">Forum</a></li><li><ahref="https://chat.vuejs.org"target="_blank">Community Chat</a></li><li><ahref="https://twitter.com/vuejs"target="_blank">Twitter</a></li><br><li><ahref="http://vuejs-templates.github.io/webpack/"target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><ahref="http://router.vuejs.org/"target="_blank">vue-router</a></li><li><ahref="http://vuex.vuejs.org/"target="_blank">vuex</a></li><li><ahref="http://vue-loader.vuejs.org/"target="_blank">vue-loader</a></li><li><ahref="https://github.com/vuejs/awesome-vue"target="_blank">awesome-vue</a></li></ul></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>components/HelloWorld.vue解讀
1.自定義組件
2.可以顯示頁面
3.進行編譯，得到視圖
4.將編譯后的視圖/頁面返回
App.vue
<template><div id="app"><img src="./assets/logo.png"><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>App.vue解讀
1.項目的主體單頁
2.引入<router-view/>
3.就可以顯示路由后的頁面/視圖
index.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue_project_quickstart</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>index.html
1.是項目首頁
2.定義了div id = app
3.當vue實例創建好，并渲染好后，就會掛載到div
4.用戶就看到了最后的效果
)
)
![[Effective C++]條款28:避免返回handles指向對象內部成分](http://pic.xiahunao.cn/[Effective C++]條款28:避免返回handles指向對象內部成分)
完整指南)