最详细的Vue Hello World应用开发步骤
很多Vue的初學者想嘗試這個框架時，都被webpack過于復雜的配置所嚇倒，導致最后無法跑出一個期望的hello word效果。今天我就把我第一次使用webpack打包一個Vue Hello World應用的所有步驟詳細記錄下來，供Vue的初學者參考。
安裝nodejs和npm，這兩個就不用說了，網上很多教程。
本地隨便新建一個文件夾，進入后運行命令npm init, 一路next下去，自動生成package.json。
運行命令npm install –save-dev webpack-dev-server，安裝一個輕量級的服務器，該服務器用于vue應用開發完畢后的本地測試。
重復執行命令npm install –save-dev ，也就是把下列命令粘貼到cmd里進行執行：
npm install –save-dev css-loader npm install –save-dev vue-template-compiler npm install –save-dev webpack npm install –save-dev vue-loader npm install –save-devvue-router參數-save-dev的效果是讓這些安裝的module出現在package.json的devDependencies區域內，如下圖紅色區域所示：
這些都是開發時依賴。我們再用下列命令安裝運行時依賴：
npm install –save vue vuex然后再在package.json里手動加入如下這一段內容：
目的是開發完畢后，使用命令npm run dev可以啟動webpack-dev-server，運行我們的vue應用，并帶上參數–inline --hot。
再回到根目錄下，新建一個文件main.js:
import Vue from 'vue'; import AppJerry from './src/index.vue'new Vue({ el: "#demo", components: { app: AppJerry } });這段代碼首先將我們在src文件夾的index.vue里實現的應用導出，存儲到變量AppJerry里，再將這個應用安裝到html頁面id為demo的div標簽里。安裝是通過創建Vue實例并將div元素的id傳入構造函數里進行的。當然，我們還沒創建html文件，所以馬上創建一個名為index.html的文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello world</title> </head> <body> <div id="demo"> <app></app> </div> <script src="dist/build.js"></script> </body> </html>我們注意到這個index.html里引用了一個dist/build.js的文件，這個文件用來干嘛的？
這里就不得不提webpack在現代前端開發技術中起的重要作用了。WebPack可以看做是模塊打包機：它做的事情是，分析我們的前端項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言，比如Scss，TypeScript等，并將其打包為合適的格式以供瀏覽器使用。具體到我們這個例子，就是說webpack把我們src文件夾下的index.vue打包轉換成瀏覽器能識別的js文件，webpack的輸出就是dist文件夾下的build.js文件。
為了讓webpack清楚地知道它要完成什么樣的任務，我們通過創建一個配置文件webpack.config.js來完成webpack任務指定。
這個配置文件的內容：
var path = require('path'); module.exports = { entry: './main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { loaders: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.(png|jpg|eot|svg|ttf|woff)/, loader: 'url?limit=40000' } ] } }里面定義了webpack執行任務的入口是main.js文件，任務輸出的文件夾是項目文件夾里的dist目錄，輸出文件是build.js, webpack掃描的文件通過vue-loader指定，特征是以.vue結尾的文件。
到目前為止，這個基于Vue的hello world應用的開發和配置都結束了，是不是很簡單？
我們可以來測試了。
這個打包后的文件尺寸很大，有323KB，包含了vue.js本身的內容和我們index.vue里的轉換后的內容。下圖高亮區域就是我們index.vue里的實現被webpack處理后生成對應的JavaScript代碼。
使用npm run dev啟動webpack-dev-server，看到提示說在localhost:8080上可以訪問我們的應用了。
瀏覽器里訪問，看到Hello World的輸出，說明我們成功地走完了一個基于webpack的Vue應用開發流程。
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
uto-orient/strip%7CimageView2/2/w/1240)
總結
以上是生活随笔為你收集整理的最详细的Vue Hello World应用开发步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 消息称育碧 Ubisoft + 服务将于
- 下一篇： html5倒计时秒杀怎么做,vue 设