vue-cli 运行机制

admin 发布于 VUE

vue-cli 是怎样运行起来的呢,也许直接用 script 引入 vue.js 能够明白,就当作一个插件使用,但是 vue结合 webpack 开创了新的开发方式,直接利用 .vue文件 进行开发,那么这个是如何运行起来的呢。下面我们一起研究。

首先是运行 npm run dev 启动项目,这个命令是在package.json里配置的。

执行命令后会运行 

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
这个是 webpack 的命令,
webpack-dev-server 启动一个使用 express 的 Http 服务器 

webpack.dev.conf.js里引入了webpack.base.conf.js

在webpack.base.conf.js里配置了入口文件main.js

entry: {
    app: './src/main.js'
},
那么这个 main.js 是如何应用到 index.html 里呢,当然就是通过上面的入口文件配置

再利用webpack.dev.conf.js里的html-webpack-plugin插件,自动生成一个 index.html,把编译好的的 js 文件,引入到 html 中。

 new HtmlWebpackPlugin({  //自动生成html文件,比如编译后文件的引入
    filename: 'index.html', //生成的文件名
    template: 'index.html', //模板
    inject: true //默认值,将js文件插入body的底部,当然你可以设置插在头部
  }),
然后我们再回过头来看 main.js
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'  })

template: '<App/>'把 App 组件应用到 html 中

这里没有介绍特别复杂的 webpack 的命令介绍和 vue 的基础,只是弄清楚整个的运行流程,相信在以后应用的时候能方便很多。

通过上面的介绍是不是对于整个 vue-cli 有个整体的认识了。



144浏览量 · 0评论 · 2019-10-19 09:42:13

全部评论  0

注册登录 进行评论

热门专题

更多专题