vue到現在已經成為一個熱門的框架，在項目實踐當中，如果想要創建一個新項目，通常都會使用vue-cli的腳手架工具，毋容置疑能夠方便很多，很多東西也不需要自己親自去配置。都知道，腳手架其實是vue結合webpack去實現的。在這里，我就想寫一篇從零創建vue結合webpack項目的文章，跟大家學習分享。
一、首先來整理個最簡單的目錄結構
? ? |-index.html
? ? |-main.js
? ? |-App.vue
? ? |-package.json
? ? |-webpack.config.js
首先需要個index.html的最終打開頁面，然后有一個main.js的js入口文件，還有一個vue后綴的vue文件（vue組件化開發少不了的vue后綴文件），還要一個package.json的工程文件（記錄你項目名稱、依賴、配置等信息的文件，這里用npm init生成），最后當然少不了的webpack配置文件。
到這里第一步完成。
二、安裝webpack及webpack-dev-server
npm install webpack webpack-dev-server --save-dev（或cnpm install webpack?webpack-dev-server --save-dev）
運行webpack-dev-server --inline --hot --port 8083
?
三、安裝各種依賴。
首先是各種各樣的loder和babel編譯所需要的包，這里簡單列舉一下：
vue-loader、vue-html-loader、css-loader、vue-style-loader、babel-loader等loader和vue-hot-reload-api
babel-core、babel-plugin-transform-runtime、babel-preset-es2015、babel-runtime（具體哪個什么功能自行查找了，不是范圍內……）
一次性全部安裝
cnpm install vue-loader vue-html-loader css-loader vue-style-loader babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api?--save-dev
（由于版本問題，以免帶來問題，推薦使用我找的版本，也是試了好久……）
貼一下package.json
{"name": "test","version": "1.0.0","description": "","main": "main.js","scripts": {"dev": "webpack-dev-server --inline --hot --port 8083"},"author": "","license": "ISC","devDependencies": {"babel-core": "^6.17.0","babel-loader": "^6.2.5","babel-plugin-transform-runtime": "^6.15.0","babel-preset-es2015": "^6.16.0","babel-runtime": "^6.11.6","css-loader": "^0.25.0","vue-hot-reload-api": "^1.3.2","vue-html-loader": "^1.2.3","vue-loader": "^8.5.4","vue-style-loader": "^1.0.0","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"},"dependencies": {"vue": "^2.6.7"} }
?
別忘了安裝vue……
cnpm install vue --save，ok，依賴準備就緒
四、編寫webpack.config.js
入口文件是main.js，輸出文件bundle.js，同時配置好vue文件的loader和js的loader，代碼如下
module.exports={entry:'./main.js',output:{path:__dirname,filename:'bundle.js'},resolve: {alias: {'vue': 'vue/dist/vue.js'}},module:{loaders:[{test:/\.vue$/, loader:'vue'},{test:/\.js$/, loader:'babel', exclude:/node_modules/}]},babel:{presets:['es2015'],plugins:['transform-runtime']} };
?
五、編寫其他頁面
index.html頁面：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"></div><script src="bundle.js"></script> </body> </html>
?
main.js
import Vue from 'vue' import App from './App.vue'new Vue({el:'#app',components:{App},template: '<App/>' });
?
App.vue
<template><h1>{{msg}}</h1> </template> <script>export default{data(){return {msg:'welcome Vue ^_^'}}} </script> <style>body{background: #ccc} </style>
?
六、運行及查看
?
)
