溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue Hello World應用的開發步驟”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue Hello World應用的開發步驟”吧!
安裝nodejs和npm，這兩個就不用說了，網上很多教程。
本地隨便新建一個文件夾，進入后運行命令npm init, 一路next下去，自動生成package.json。
運行命令npm install –save-dev webpack-dev-server，安裝一個輕量級的服務器，該服務器用于vue應用開發完畢后的本地測試。
重復執行命令npm install –save-dev
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，把如下內容拷貝進去：
<style>
h3{
color: red;
}
</style>
<template>
<h3>Jerry: Hello, World!</h3>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>再回到根目錄下，新建一個文件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應用的開發和配置都結束了，是不是很簡單？
我們可以來測試了。
直接在命令行里敲webpack命令，就會自動執行打包操作，并在控制臺上看到build.js文件成功生成的消息：
這個打包后的文件尺寸很大，有323KB，包含了vue.js本身的內容和我們index.vue里的轉換后的內容。下圖高亮區域就是我們index.vue里的實現被webpack處理后生成對應的JavaScript代碼。
使用npm run dev啟動webpack-dev-server，看到提示說在localhost:8080上可以訪問我們的應用了。
瀏覽器里訪問，看到Hello World的輸出，說明我們成功地走完了一個基于webpack的Vue應用開發流程。
到此，相信大家對“Vue Hello World應用的開發步驟”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
