vue高仿餓了麼APP（二）
阿新 • • 發佈：2018-11-19
這裡我直接跳過vue-cli的安裝。
一，vue.js程式碼是如何執行的？
1，進入頁面，首先載入index.html和main.js檔案。
① index.html檔案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" type="text/css"href="static/css/reset.css"/> <title>vue-project</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
②main.js檔案
主要作用是初始化vue例項並引入需要的外掛。
import Vue from 'vue' import App from './App' import router from './router' import VueResource from 'vue-resource' import './commom/stylus/index.styl'Vue.config.productionTip = false Vue.use(VueResource) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {App}, template: '<App/>' })
main.js檔案中給id="app"的div建立一個vue的例項，該例項中有一個名叫"App"的元件，該元件通過vue-router將其他元件如goods.vue中的模板注入到App.vue的模板中。
App.vue是我們的主元件，所有頁面都是在App.vue下進行切換的。其實你也可以理解為所有的路由也是App.vue的子元件。所以我將router標示為App.vue的子元件。
基本的就看，這篇部落格。分析Vue如何執行。
接下來專案中還會詳細介紹。
最後專案執行的時候·，weback會打包生成vue專案通過webpack打包以後,會自動生成app.js--app.js裡包括了css和js,所以最終http請求裡不會有任何的css檔案。
二，webpack是如何做打包的？