成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

stormzhang / 433人閱讀

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

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

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

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

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

重復(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ū)域所示：

這些都是開(kāi)發(fā)時(shí)依賴(lài)。我們?cè)儆孟铝忻畎惭b運(yùn)行時(shí)依賴(lài)：

npm install –save vue vuex

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

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

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

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

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

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

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





hello world

我們注意到這個(gè)index.html里引用了一個(gè)dist/build.js的文件，這個(gè)文件用來(lái)干嘛的？

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

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

這個(gè)配置文件的內(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掃描的文件通過(guò)vue-loader指定，特征是以.vue結(jié)尾的文件。

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

我們可以來(lái)測(cè)試了。

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100584.html

相關(guān)文章

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

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

    jlanglang 評(píng)論0 收藏0

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

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

    李增田 評(píng)論0 收藏0

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

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

    shevy 評(píng)論0 收藏0

  • Hello Vue: Vue快速入門(mén)教程

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

    Pines_Cheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<