02 - 上手使用

時間 2019-11-19

標籤上手使用简体版

原文原文鏈接

前言html

接下來咱們看看如何定製本身的頁面以及邏輯。vue

咱們開發環境中的工做地點在src目錄下，下面就來解析這個目錄下的一些文件。webpack

項目啓動流程es6

我簡單用一兩句話帶過，由於我還沒研究。web

項目根目錄下的index.html會先被加載，而後加載src/main.js。app

知道這一點就能夠上手操做了。ui

index.htmlspa

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>ttt</title>
 7   </head>
 8   <body>
 9     <div id="app"></div>
10     <!-- built files will be auto injected -->
11   </body>
12 </html>

這個文件就是vue項目的主頁，內容也很簡單，就是一個id爲"app"的div，eslint

以後加載main.js的時候，會把這個div當作vue實例的掛載元素。code

src/main.js

咱們打開這個文件：

 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'
 4 import App from './App'　　// 導入當前目錄下的App.vue文件
 5 
 6 Vue.config.productionTip = false
 7 
 8 /* eslint-disable no-new */
 9 new Vue({
10   el: '#app',　　　　　　　　// 找到vue實例的掛載元素
11   components: { App },　　 // 註冊子組件
12   template: '<App/>'　　　　// 使用該模板字符串替換掛載元素
13 })