Vue2.0史上最全入坑教程（中）—— 腳手架代碼詳解

時間 2019-11-11

標籤 vue2.0 vue 史上教程腳手架代碼詳解简体版

原文原文鏈接

書接上文咱們說道，如何利用腳手架（vue-cli）構建一個vue項目，本回書咱們一塊兒來學習分析下代碼。css

回顧下建立後的項目目錄：html

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

a. 頁面：index.htmlwebpack

這個沒什麼好說的就是一個簡單的html頁面，這裏id='app'，是爲後面的設置vue做用域有關的。git

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>datura</title>
  </head>
  <body>
    <div id="app"></div>  
    <!-- built files will be auto injected -->
  </body>
</html>

b. 文件：Hello.vuees6

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>  <!-- 這裏是展現數據中的  -->
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'hello',   /* 這個name暫時不知道用啥用，根據官方文檔說的是方便排錯的 */
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'   /* 這裏是數據，必定記住數據必定要放data中而後用return返回 */
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是這裏的樣式只對當前頁面有效不會影響其餘頁面，還有能夠設置lang="scss"就是支持css預編譯，也就是支持sass或者less  */
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

c. 文件：App.vuegithub

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-view></router-view>   <!--  這裏是用來展現路由頁面內容的，若是想用跳轉就用<router-link to='xxx'></router-link> -->
  </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>

d. 文件：main.jsweb

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

import Vue from 'vue'   /* 這裏是引入vue文件 */
import App from './App'  /* 這裏是引入同目錄下的App.vue模塊 */
import router from './router'  /* 這裏是引入vue的路由 */

/* eslint-disable no-new */
new Vue({
  el: '#app',  /* 定義做用範圍就是index.html裏的id爲app的範圍內 */
  router,    /* 引入路由 */
  template: '<App/>',   /* 給Vue實例初始一個App組件做爲template 至關於默認組件 */
  components: { App }  /* 註冊引入的組件App.vue */
})

e. 文件：index.jsvue-router

這個是配置路由的頁面

import Vue from 'vue'   /* 引用vue文件 */
import Router from 'vue-router'  /* 引用vue路由模塊，並賦值給變量Router */
import Hello from '@/components/Hello'  /* 英文Hello.vue模版，並賦值給變量Hello,這裏是「@」至關於「../」 */
Vue.use(Router)   /* 使用路由 */
export default new Router({
  routes: [     /* 進行路由配置，規定「/」引入到Hello組件 */
    {
      path: '/',
      name: 'Hello',  /* 這裏的name同上，暫時沒發現有什麼意思 */
      component: Hello   /* 註冊Hello組件 */
    }
  ]
})

說明：若是須要增長組件那就在components文件下定義xx.vue文件並編寫代碼便可，若是須要配置路由就要進行在index.js進行路由「路徑」配置，還須要點擊跳轉就要用到<router-link></router-link>標籤了。至於後面的過濾器啊，事件啊，鉤子函數，ajax等等之類的和vue1.0差很少就不一一敘述，可是會在用到的時候簡單說明一下的。我會用下面大約倆個章節來展現一個簡單的「小項目」。

Vue2.0史上最全入坑教程（下）

做者：datura_lj 連接：https://www.jianshu.com/p/2b661d01eaf8 來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。