vue+webpack 專案示例（第一部分）
阿新 • • 發佈：2019-01-07
專案沒有使用vue-cli建立目錄，自己搭建，我們先學會如何建立整個專案；
1.先隨便找個地方建立一個資料夾，起個名字吧：vue-webpack ;
使用npm init 先建立一個packge.json ;
2. 區域性安裝webpack（注意，請使用webpack3.0版本，不要用最新的4.0版本），vue ，vue-loader;
3.第二步的時候出現了warn 警告資訊，那麼來處理一下，
因為缺少一些東西，所以下載一下css-loader和vue-template-compiler；
4.在專案目錄下新建src資料夾，在src中新建 app.vue ,app.vue中寫入內容：
<5.上面的專案是沒法直接執行的，我們繼續在專案目錄vue-webpack下建立：webpack.config.js檔案
6.在 src目錄下建立index.js 檔案；
import Vue from "vue"import App from './app.vue'const root=document.createElement("div");document.body.appendChild(root);
new Vue({ render:(h)=>h(App)}).$mount(root);
7.修改我們一開始建立的package.json 檔案：增加 “build”：“webpack。。。。省略”（如下）
{ "name": "vue-webpack", "version": "1.0.0", "description": "", "main": "\u001b[A\u001b[B", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.28.11", "vue": "^2.5.16", "vue-loader": "^14.2.1", "vue-template-compiler": "^2.5.16", "webpack": "^3.0.0" }}8.全部完成之後目錄結構如下：
9.我們使用命令： npm run build 即可；（注意，下載webpack的時候注意版本，4.0版本的webpack-cli已經分離出去
，我們這裡使用3.0.0版本）
10.命令執行之後，目錄多出來一個dist 資料夾，裡面還有我們的目標檔案 bundle.js
11,接下來我們測試執行一下就可以了，
測試步驟：在dist資料夾下建立index.html檔案，引入我們的bundle.js檔案：
<!doctype html><html> <head> <meta> <title>this is test file</title> </head> <body> <scriptsrc="bundle.js"></script> </body></html>然後瀏覽器開啟這個網頁：
好了，這就是一個最簡單的完整的vue+webpack例項了；