參考作者：https://www.jianshu.com/p/2b661d01eaf8

只是為了方便個人學習。

來看一下腳手架創建后的項目目錄

?說明：在*.vue文件，template標簽里寫html代碼，且template直接子級只能有一個標簽。style標簽里寫樣式，script里面寫js代碼

1. main.js

這個js文件是主頁面配置的主入口。主要是利用es6的模塊化引入模塊

1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' /* 這里是引入vue文件 */ 4 import App from './App'/* 這里是引入同目錄下的App.vue模塊 */ 5 import router from './router'/* 這里是引入vue的路由 */ 6 7 Vue.config.productionTip = false 8 9 /* eslint-disable no-new */ 10 new Vue({ 11 el: '#app',/* 定義作用范圍就是index.html里的id為app的范圍內 */ 12 router,/* 引入路由 */ 13 components: { App },/* 給Vue實例初始一個App組件作為template 相當于默認組件 */ 14 template: '<App/>'/* 注冊引入的組件App.vue */ 15 })

?

2. 文件：App.vue

1 <template> 2 <div id="app"> 3 <img src="./assets/logo.png"> 4 <router-view/> <!-- 這里是用來展示路由頁面內容的，如果想用跳轉就用<router-link to='xxx'></router-link> --> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'App' 11 } 12 </script> 13 14 <style> 15 #app { 16 font-family: 'Avenir', Helvetica, Arial, sans-serif; 17 -webkit-font-smoothing: antialiased; 18 -moz-osx-font-smoothing: grayscale; 19 text-align: center; 20 color: #2c3e50; 21 margin-top: 60px; 22 } 23 </style>

3.Hello.vue頁面

1 <template> 2 <div class="hello"> 3 <h1>{{ msg }}</h1><!-- 這里是展示數據中的 --> 4 <h2>Essential Links</h2> 5 <ul> 6 <li> 7 <a 8 href="https://vuejs.org" 9 target="_blank" 10 > 11 Core Docs 12 </a> 13 </li> 14 <li> 15 <a 16 href="https://forum.vuejs.org" 17 target="_blank" 18 > 19 Forum 20 </a> 21 </li> 22 <li> 23 <a 24 href="https://chat.vuejs.org" 25 target="_blank" 26 > 27 Community Chat 28 </a> 29 </li> 30 <li> 31 <a 32 href="https://twitter.com/vuejs" 33 target="_blank" 34 > 35 Twitter 36 </a> 37 </li> 38 <br> 39 <li> 40 <a 41 href="http://vuejs-templates.github.io/webpack/" 42 target="_blank" 43 > 44 Docs for This Template 45 </a> 46 </li> 47 </ul> 48 <h2>Ecosystem</h2> 49 <ul> 50 <li> 51 <a 52 href="http://router.vuejs.org/" 53 target="_blank" 54 > 55 vue-router 56 </a> 57 </li> 58 <li> 59 <a 60 href="http://vuex.vuejs.org/" 61 target="_blank" 62 > 63 vuex 64 </a> 65 </li> 66 <li> 67 <a 68 href="http://vue-loader.vuejs.org/" 69 target="_blank" 70 > 71 vue-loader 72 </a> 73 </li> 74 <li> 75 <a 76 href="https://github.com/vuejs/awesome-vue" 77 target="_blank" 78 > 79 awesome-vue 80 </a> 81 </li> 82 </ul> 83 </div> 84 </template> 85 86 <script> 87 export default { 88 name: 'HelloWorld', 89 data () { 90 /* 這里是數據，一定記住數據一定要放data中然后用return返回 */ 91 return { 92 msg: 'Welcome to Your Vue.js App' 93 } 94 } 95 } 96 </script> 97 98 <!-- Add "scoped" attribute to limit CSS to this component only --> 99 <style scoped> 100 /* scoped的意思是這里的樣式只對當前頁面有效不會影響其他頁面， 101 還有可以設置lang="scss"就是支持css預編譯，也就是支持sass或者less */ 102 h1, h2 { 103 font-weight: normal; 104 } 105 ul { 106 list-style-type: none; 107 padding: 0; 108 } 109 li { 110 display: inline-block; 111 margin: 0 10px; 112 } 113 a { 114 color: #42b983; 115 } 116 </style>

?

4. router文件下的index.js是路由配置

這個是配置路由的頁面

1 import Vue from 'vue' //這里是引用vue文件 2 import Router from 'vue-router' //這里是引入vu路由模塊，并賦值給Router 3 import HelloWorld from '@/components/HelloWorld'///* 英文Hello.vue模版，并賦值給變量Hello,這里是“@”相當于“../” */ 4 5 Vue.use(Router)/* 使用路由 */ 6 7 export default new Router({ 8 routes: [/* 進行路由配置，規定“/”引入到Hello組件 */ 9 { 10 path: '/', 11 name: 'HelloWorld', 12 component: HelloWorld/* 注冊Hello組件 */ 13 } 14 ] 15 })

?

如果需要增加組件那就在components文件下定義xx.vue文件并編寫代碼即可，如果需要配置路由就要進行在index.js進行路由“路徑”配置，

注意：import from和export defalut的使用

轉載于:https://www.cnblogs.com/wanqingcui/p/9747068.html

總結

以上是生活随笔為你收集整理的Vue2.0 脚手架代码详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。