vue-cli中js是怎样引入html的?
2018-02-05 11:42
489 查看
vue-cli是怎么通过webpack把js文件引入index.html的过程呢?
vue新手在用vue-cli写项目时候会发现,项目目录下index.html并没有通过标签引入任何js。index.html如下:
那到底是怎么引入js的呢?首先打开package.json,找到script
执行命令npm run dev ,这时你会看到你创建的vue项目启动起来,所以我们一步步看,执行这个命令,需要找到webpack.dev.conf.js”这个文件,打开它
我们看到
它引入了很多插件,这里我们不管其他的,只看两个,webpack.base.conf ;html-webpack-plugin
打开webpack.base.conf.js,我们看到
入口文件指向main.js,打开main.js,如下
这里绑定了id为app的元素,然后我们打开第二个文件html-webpack-plugin,这个plugin是帮做我们配置html文件中js文件的引入的,有了这个plugin我们就不用再用在html中加入标签这么傻的方式引入js文件了在node-modules中,打开index.js
我们发现这不是有index.html吗,所以通过一系列复杂的关系我们得出:启动命令后,通过webpack的文件决定main.js作为app的入口,将main.js通过id绑定在index.html上
vue新手在用vue-cli写项目时候会发现,项目目录下index.html并没有通过标签引入任何js。index.html如下:
<!DOCTYPE html> <head> </meta charsets="utf-8"> </meta name='viewport' content='width=device-width,user-scalable=no,scalable=1.0'> <head> <body> <div id="app"></div> <body> </html>
那到底是怎么引入js的呢?首先打开package.json,找到script
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" },
执行命令npm run dev ,这时你会看到你创建的vue项目启动起来,所以我们一步步看,执行这个命令,需要找到webpack.dev.conf.js”这个文件,打开它
我们看到
'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder')
它引入了很多插件,这里我们不管其他的,只看两个,webpack.base.conf ;html-webpack-plugin
打开webpack.base.conf.js,我们看到
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' },
入口文件指向main.js,打开main.js,如下
import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import store from "./store" import echarts from 'echarts' Vue.config.productionTip = false Vue.prototype.$echarts = echarts Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
这里绑定了id为app的元素,然后我们打开第二个文件html-webpack-plugin,这个plugin是帮做我们配置html文件中js文件的引入的,有了这个plugin我们就不用再用在html中加入标签这么傻的方式引入js文件了在node-modules中,打开index.js
function HtmlWebpackPlugin (options) { // Default options this.options = _.extend({ template: path.join(__dirname, 'default_index.ejs'), filename: 'index.html', hash: false,
我们发现这不是有index.html吗,所以通过一系列复杂的关系我们得出:启动命令后,通过webpack的文件决定main.js作为app的入口,将main.js通过id绑定在index.html上
相关文章推荐
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- Vue-cli构建项目, 组件中js代码引入图片路径问题
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- vuejs第二篇 vue-cli配置移动端自适配(引入flexible)
- Vue-cli项目中,引入css、js或者引入组件,检查后未发现错误,npm红叉报错原因
- (vue.js)vue-cli构建,scss文件引入本地css意外报错
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- webpack+vue-cli项目中引入外部非模块格式js的方法
- vue通过写引入完整js的方式在HTML上的组件写法
- Vue-cli引入Zepto.js
- 为什么推荐使用npm安装Vue,而不是直接在HTML中引入vue.js
- 解决vue-cli npm run build之后vendor.js文件过大的问题
- Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)
- 如何Vue-cli开始使用在Vue.js项目中启动TDD(测试驱动开发)
- 如何在vue-cli webpack中全局引入jquery
- Vue.js:使用vue-cli快速构建项目
- vue.js的手脚架vue-cli项目搭建的步骤
- vue中引入Moment.js
- [译]怎样在Vue.js中使用jquery插件