vue-cli 執行機制
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. 那麼這個 main.js 是如何應用到 index.html 裡呢，當然就是通過上面的入口檔案配置，
entry: {
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/[email protected]/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，下篇我會再講解。