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

時間 2019-11-10

標籤詳細 vue hello world 應用開發步驟简体版

原文原文鏈接

不少Vue的初學者想嘗試這個框架時，都被webpack過於複雜的配置所嚇倒，致使最後沒法跑出一個指望的hello word效果。今天我就把我第一次使用webpack打包一個Vue Hello World應用的全部步驟詳細記錄下來，供Vue的初學者參考。javascript

安裝nodejs和npm，這兩個就不用說了，網上不少教程。css
本地隨便新建一個文件夾，進入後運行命令npm init, 一路next下去，自動生成package.json。html

運行命令npm install –save-dev webpack-dev-server，安裝一個輕量級的服務器，該服務器用於vue應用開發完畢後的本地測試。前端

重複執行命令npm install –save-dev <name>，也就是把下列命令粘貼到cmd裏進行執行：vue

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區域內，以下圖紅色區域所示：java

這些都是開發時依賴。咱們再用下列命令安裝運行時依賴：node

npm install –save vue vuex

而後再在package.json裏手動加入以下這一段內容：webpack

目的是開發完畢後，使用命令npm run dev能夠啓動webpack-dev-server，運行咱們的vue應用，並帶上參數--inline --hot。web

在項目文件夾根目錄下建立一個名爲src的文件夾，文件夾裏新建一個文件index.vue，把以下內容拷貝進去：

<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>

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

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應用的開發和配置都結束了，是否是很簡單？

咱們能夠來測試了。

直接在命令行裏敲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)

相關標籤/搜索