前言

通过vue init webpack和npm install命令初始化项目后,执行npm run dev就打开了网站http://localhost:8080。初学者不知道index.html、App.vue、main.js是如何粘在一起的,这里简单说明一下。

启动过程

1.npm run dev

npm run XXX是执行配置在package.json中的脚本,比如:

 "scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},

这里就是执行了 node build/dev-server.js文件。

2.main.js和index.html

build/dev-server.js里var webpackConfig = require('./webpack.dev.conf') 调用了webpack.dev.conf配置文件。

var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
} var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')

webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件。

在webpack.base.conf.js文件中调用了./src/main.js

main.js用到了一个html元素#app。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui' var jquery = require('jquery'); Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

再次回到webpack.dev.conf.js文件的结尾处。

   new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),

template指定了index.html作为输出文件的模板文件。

3.App.vue和Hello.vue

在main.js文件中引用了App.vue和router。

App.vue里有个router-view元素,所有通过router返回的vue都会填充在这个元素里面。

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>

router/index.js文件中的路由配置,当访问根目录时就返回@/components/Hello.vue里的内容。

   {
path: '/',
name: 'Hello',
component: Hello
},

所以最后看到的页面是由App.vue和Hello.vue两个模块组成的。

参考链接

1. html-webpack-plugin

2. webpack开发和生产两个环境的配置详解

vue-cli webpack项目npm run dev启动过程的更多相关文章

  1. VUE npm run dev 启动时,报了一大堆错误 Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 7.x

    npm run dev 启动时,报了一大堆错误 Module build failed: Error: Missing binding E:\2017VocaSchool\vocationWeb\no ...

  2. vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'

    问题: vue 项目npm run dev运行时报错,如下图:  原因: 缺少相应的组件 解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --sav ...

  3. vue项目npm run dev 报错error in ./src/main.js Module build failed: ReferenceError: Unknown plugin "transform-vue-jsx" specified in......

    问题: vue项目npm run dev运行时报错,如下图:  原因: 缺少组件 解决办法: 安装相应的组件:  npm install babel-plugin-transform-vue-jsx ...

  4. 运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs', 原因是

    webpack@3.X运行项目npm run dev时报错: ~Error: Cannot find module 'webpack-cli/bin/config-yargs' 我的原因是:  web ...

  5. 下载一个vue项目执行npm install 后运行项目npm run dev后出错 - 问题解决

    在SVN上拉下来一个vue项目,上面没有提交项目里面的node_modules文件夹,所以要自己执行 npm install 安装,但安装完后运行项目后却报错了: $ npm run dev > ...

  6. npm run dev启动项目,electron提示throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')

    npm run dev 项目,提示 throw new Error('Electron failed to install correctly, please delete node_modules/ ...

  7. vue 项目npm run dev ip访问

    webpack npm run dev 不能通过ip访问 只能通过localhost访问 解决方法如下: 修改vue-cli: config/index.js 文件 把文件中 host 的值,改成 i ...

  8. vue项目 npm run dev在Linux 持久运行

    touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log &a ...

  9. vue项目npm run dev 报错Uncaught SyntaxError: Unexpected token <

    目前代码所处位置是micro分支,该分支是从dev分支直接拉下来进行npm run dev的,而dev分支是可以正常运行的,网上的诸多解释是babel转义时候报错,其实对比可见,两个分支不同的地方应该 ...

随机推荐

  1. ethereum/EIPs-55 Mixed-case checksum address encoding

    eip title author type category status created 55 Mixed-case checksum address encoding Vitalik Buteri ...

  2. ECS API

    一.API调用方式 ➢对ECS API接口调用是通过向ECS API的服务端地址发送HTTP GET请求,并按照接口说明在请求 中加入相应请求参数来完成的;根据请求的处理情况,系统会返回处理结果. ➢ ...

  3. OPTIMIZER_INDEX_COST_ADJ 与OPTIMIZER_INDEX_CACHING 参数说明

    [部分转载]http://www.xifenfei.com/2012/06/optimizer_index_caching和optimizer_index_cost_adj参数说明.html 1. O ...

  4. luogu P2706 巧克力

    题目 (第一道绿题) 有点像最大子矩阵qwq 用前缀和存图,l,r代表横向的一段区间,区间和就是a[r]-a[l-1] 然后用一个k从上到下dp...因为每次l,r变化的时候原来的k就没有用了,所以k ...

  5. arduino:int & double 转string 适合12864下使用

    转自:http://www.geek-workshop.com/forum.php?mod=viewthread&tid=3383&highlight=12864 很多人在玩的时候,都 ...

  6. jmeter(十六)配置元件之计数器

    刚翻看了一下博客的草稿箱,发现很多未完成的草稿,拖了很久,趁着今天较空闲,就补上关于jmeter计数器这篇吧,拖延症,要不得啊... 先说说利用jmeter生成数据的几种方法: 1.CSV Data ...

  7. 数据库sql的in操作,解决in的过多

    一个sql的拼写后,服务器会把这个sql传送到数据库服务器执行,一般不在一个物理机上.那么传送需要走网络,包丢失等网络情况就可能出现. 一般情况,一个sql的长度不会很大,但是有种这样的情况.in操作 ...

  8. 搭建mysql cluster

    虚拟机搭建Mysql Cluster 参考文档:http://www.cnblogs.com/jackluo/archive/2013/01/19/2868152.html http://www.cn ...

  9. Windows下jupyter notebook 修改打开的浏览器

    1. 打开cmd,输入jupyter notebook --generate-config 2. 根据返回的路径打开 C:\Users\Administrator\.jupyter\jupyter_n ...

  10. Angularjs演示Service功能

    在angularjs中,我们可以自定义自己的service.可以说得是自定义的方法,函数. 下面我们一步一步来演示吧:首先为angularjs定义一个app: var demoApp = angula ...