最詳細的Vue Hello World應用開發步驟

stormzhang 發布于2019-08-23 14:25 / 363人閱讀

摘要：運行命令，安裝一個輕量級的服務器，該服務器用于應用開發完畢后的本地測試。到目前為止，這個基于的應用的開發和配置都結束了，是不是很簡單我們可以來測試了。瀏覽器里訪問，看到的輸出，說明我們成功地走完了一個基于的應用開發流程。

很多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。

在項目文件夾根目錄下創建一個名為src的文件夾，文件夾里新建一個文件index.vue，把如下內容拷貝進去：

再回到根目錄下，新建一個文件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的文件：





hello world

我們注意到這個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應用的開發和配置都結束了，是不是很簡單？

我們可以來測試了。

直接在命令行里敲webpack命令，就會自動執行打包操作，并在控制臺上看到build.js文件成功生成的消息：

這個打包后的文件尺寸很大，有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)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100584.html

Vue.js源碼（1）：Hello World的背后

摘要：構造函數文件路徑初始化這里只拿對例子理解最關鍵的步驟分析。在最后，調用了對數據進行。每個函數之后都會返回一個。就是去實例化指令，將指令和新建的元素在一起，然后將元素替換到中去。下面的代碼會在頁面上輸出Hello World，但是在這個new Vue()到頁面渲染之間，到底發生了什么。這篇文章希望通過最簡單的例子，去了解Vue源碼過程。這里分析的源碼版本是Vue.version = 1...

jlanglang 2019-08-22 10:36 評論0 收藏0
使用 PHP 來做 Vue.js 的 SSR 服務端渲染

摘要：對于客戶端應用來說，服務端渲染是一個熱門話題。在服務器預渲染初始應用狀態。重構這段腳本，使其可以在服務端運行。如果這些原因和你的情況吻合，那么使用進行服務端渲染將會是個不錯方案。我已經發布兩個庫來支持的服務端渲染和專為應用打造的。 showImg(https://segmentfault.com/img/remote/1460000014155032);對于客戶端應用來說，服務端渲染是...

李增田 2019-06-28 18:39 評論0 收藏0
3. 第一個 Java 程序 - Hello World 【連載 3】

摘要：需要注意的地方輸入法狀態調整為英文狀態代碼的縮進不要忘記分號下面圖片標注內容。語句語句是程序最小的一個執行單位，像一個指令，程序中，必須使用一個英文分號結束一條語句。建議，第一個簡單的程序，我已經詳細的為你做了演練與解釋。在上一篇文章【[準備編譯環境】]()中我們完成了 Java 編譯環境的搭建，這篇文章內容主要是來教你怎么開始編寫第一個 Java 程序，并運行它。分為兩個步驟，...

shevy 2019-08-16 11:01 評論0 收藏0
Hello Vue: Vue快速入門教程

摘要：快速入門教程，此教程包括使用的組件。的核心是能夠使用簡單的模板語法以聲明方式將數據呈現給。到目前為止，它看起來并沒有太大的不同。如果我們點擊下拉菜單，我們會得到兩個選擇或。在下拉菜單中選擇不同的選項，上面的文本也將相應的發生變化。 Vue快速入門教程，此教程包括使用Kendo UI for Vue的組件。希望通過此教程能夠成為你學習vue的一個很好的起點。這其中還包含一個可擴展的事例，...

Pines_Cheng 2019-08-29 16:29 評論0 收藏0