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