成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

最詳細(xì)的Vue Hello World應(yīng)用開發(fā)步驟

stormzhang / 371人閱讀

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

很多Vue的初學(xué)者想嘗試這個框架時，都被webpack過于復(fù)雜的配置所嚇倒，導(dǎo)致最后無法跑出一個期望的hello word效果。今天我就把我第一次使用webpack打包一個Vue Hello World應(yīng)用的所有步驟詳細(xì)記錄下來，供Vue的初學(xué)者參考。

安裝nodejs和npm，這兩個就不用說了，網(wǎng)上很多教程。

本地隨便新建一個文件夾，進(jìn)入后運(yùn)行命令npm init, 一路next下去，自動生成package.json。

運(yùn)行命令npm install –save-dev webpack-dev-server，安裝一個輕量級的服務(wù)器，該服務(wù)器用于vue應(yīng)用開發(fā)完畢后的本地測試。

重復(fù)執(zhí)行命令npm install –save-dev ，也就是把下列命令粘貼到cmd里進(jìn)行執(zhí)行：

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

參數(shù)-save-dev的效果是讓這些安裝的module出現(xiàn)在package.json的devDependencies區(qū)域內(nèi)，如下圖紅色區(qū)域所示：

這些都是開發(fā)時依賴。我們再用下列命令安裝運(yùn)行時依賴：

npm install –save vue vuex

然后再在package.json里手動加入如下這一段內(nèi)容：

目的是開發(fā)完畢后，使用命令npm run dev可以啟動webpack-dev-server，運(yùn)行我們的vue應(yīng)用，并帶上參數(shù)--inline --hot。

在項(xiàng)目文件夾根目錄下創(chuàng)建一個名為src的文件夾，文件夾里新建一個文件index.vue，把如下內(nèi)容拷貝進(jìn)去：

再回到根目錄下，新建一個文件main.js:

import Vue from "vue";
import AppJerry from "./src/index.vue"

new Vue({
el: "#demo",
components: {
app: AppJerry
}
});

這段代碼首先將我們在src文件夾的index.vue里實(shí)現(xiàn)的應(yīng)用導(dǎo)出，存儲到變量AppJerry里，再將這個應(yīng)用安裝到html頁面id為demo的div標(biāo)簽里。安裝是通過創(chuàng)建Vue實(shí)例并將div元素的id傳入構(gòu)造函數(shù)里進(jìn)行的。當(dāng)然，我們還沒創(chuàng)建html文件，所以馬上創(chuàng)建一個名為index.html的文件：





hello world

我們注意到這個index.html里引用了一個dist/build.js的文件，這個文件用來干嘛的？

這里就不得不提webpack在現(xiàn)代前端開發(fā)技術(shù)中起的重要作用了。WebPack可以看做是模塊打包機(jī)：它做的事情是，分析我們的前端項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言，比如Scss，TypeScript等，并將其打包為合適的格式以供瀏覽器使用。具體到我們這個例子，就是說webpack把我們src文件夾下的index.vue打包轉(zhuǎn)換成瀏覽器能識別的js文件，webpack的輸出就是dist文件夾下的build.js文件。

為了讓webpack清楚地知道它要完成什么樣的任務(wù)，我們通過創(chuàng)建一個配置文件webpack.config.js來完成webpack任務(wù)指定。

這個配置文件的內(nèi)容：

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執(zhí)行任務(wù)的入口是main.js文件，任務(wù)輸出的文件夾是項(xiàng)目文件夾里的dist目錄，輸出文件是build.js, webpack掃描的文件通過vue-loader指定，特征是以.vue結(jié)尾的文件。

到目前為止，這個基于Vue的hello world應(yīng)用的開發(fā)和配置都結(jié)束了，是不是很簡單？

我們可以來測試了。

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

這個打包后的文件尺寸很大，有323KB，包含了vue.js本身的內(nèi)容和我們index.vue里的轉(zhuǎn)換后的內(nèi)容。下圖高亮區(qū)域就是我們index.vue里的實(shí)現(xiàn)被webpack處理后生成對應(yīng)的JavaScript代碼。

使用npm run dev啟動webpack-dev-server，看到提示說在localhost:8080上可以訪問我們的應(yīng)用了。

瀏覽器里訪問，看到Hello World的輸出，說明我們成功地走完了一個基于webpack的Vue應(yīng)用開發(fā)流程。

要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

uto-orient/strip%7CimageView2/2/w/1240)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100584.html

相關(guān)文章

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

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

    jlanglang 評論0 收藏0

  • 使用 PHP 來做 Vue.js 的 SSR 服務(wù)端渲染

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

    李增田 評論0 收藏0

  • 3. 第一個 Java 程序 - Hello World 【連載 3】

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

    shevy 評論0 收藏0

  • Hello Vue: Vue快速入門教程

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

    Pines_Cheng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<