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 服务器
运行这个命令在目标文件夹中是看不到编译后的文件,实时编译后的文件都保存到了内存当中。所以在目标文件夹中都看不到编译后的文件。
–inline 实时监听页面变化,自动刷新。
–progress 显示打包的进度
–config 指定读取哪个配置文件
webpack.dev.conf.js里引入了webpack.base.conf.js
在webpack.base.conf.js里配置了入口文件main.js
entry: {
app: './src/main.js'
},
找到入口文件main.js
在 main.js中应用了 vue 最基础的代码
// 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'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
那么这个 main.js 是如何应用到 index.html 里呢,当然就是通过上面的入口文件配置,
entry: {
找到这个文件,再利用webpack.dev.conf.js里的html-webpack-plugin插件,自动生成一个 index.html,把编译好的的 js 文件,引入到 html 中。
app: './src/main.js'
},
new HtmlWebpackPlugin({ //自动生成html文件,比如编译后文件的引入
filename: 'index.html', //生成的文件名
template: 'index.html', //模板
inject: true //默认值,将js文件插入body的底部,当然你可以设置插在头部
}),
然后我们再回过头来看 main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
通过template: '<App/>'
把 App 组件应用到 html 中,如果不理解可以自己写个例子试试,那么我们来写一个,相信一目了然,我们直接新建一个 html 文件,通过 script 引入 vue,用最简单的方式解释最复杂的问题。代码如下,下面template: '<button-counter>'
跟main.js 里的template: '<App/>'
是一个原理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// 需要编译器
new Vue({
el: '#app',
template: '<button-counter>'
})
</script>
</body>
</html>
这里没有介绍特别复杂的 webpack 的命令介绍和 vue 的基础,只是弄清楚整个的运行流程,相信在以后应用的时候能方便很多。
通过上面的介绍是不是对于整个 vue-cli 有个整体的认识了,那么如何应用其他组件,比如 element-ui,下篇我会再讲解。