vue高仿饿了么APP（二）

这里我直接跳过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是如何做打包的？

webpack构建vue项目（配置篇）

posted @ 2018-11-17 22:39  千寻的天空之城  阅读(359)  评论(0)  编辑  收藏  举报