在
[零基礎學習Vue+webpack]之vue+webpack項目的基礎依賴項的安裝詳解（1）：http://www.reibang.com/p/0fa12aa731ff
和
[零基礎學習Vue+webpack]之vue3+webpack項目的webpack對vue3進行編碼打包的詳解（2）：
http://www.reibang.com/p/21b3ec4bba74
中已經(jīng)對vue3+webpack進行了一些講解，準備工作也已經(jīng)做好了鸦做，現(xiàn)在正式開始vue3的代碼編寫了尝江。
1.新增模板頁面index.html婚苹。
在項目根目錄的src文件夾下新建一個index.html的網(wǎng)頁文件讳侨，這個網(wǎng)頁是用來作為項目的模板頁面使用的粘拾，
vue3代碼所編譯的文件均會被注入到index.html這個模板頁面之中憔晒，同時它也是vue3項目的入口主頁面甚侣，
如下圖：
圖1
index.html的頁面代碼：
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? ? <title>Vue</title>
? </head>
? <body>
? ? <div id="app"></div>
? </body>
</html>
其中的<div id="app"></div>中id的app是給vue3使用的明吩，就是vue3會將寫好的代碼放入到id為app的標簽內(nèi)；
注意：配置文件webpack.dev.config.js中plugins下的HtmlWebpackPlugin中的template屬性后面的路徑要和模板路徑保持一直（這一點在上一篇文章中有代碼）殷费。
2.對項目根目錄的src文件夾下的index.js文件進行代碼的開發(fā)印荔。
圖2：
代碼如下：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
import App from './App.vue'表示引入的組件低葫，目前App這個組件還沒有新建，這個在后面會詳細的進行講解仍律。
而代碼中的createApp(App).mount('#app')表示創(chuàng)建一個vue3的應用實例嘿悬，并把App這個組件放入到id為app的DOM元素上，
也就是以上新增的模板頁面index.html中的<div id="app"></div>水泉；
注意：這是vue3的代碼寫法善涨，與vue2是有區(qū)別的，這點一定要記住草则。
vue2：創(chuàng)建一個vue 實例是通過new Vue()來實現(xiàn)的钢拧；
vue3：通過使用createApp這個API返回一個應用實例，并且可以通過鏈條的方式繼續(xù)調(diào)用其他的方法炕横；
3.在項目根目錄的src文件夾下新建App組件源内。
新建的組件文件為App.vue，
圖3
開發(fā)代碼如下：
<template>
? ? <div>
? ? ? ? {{ welcomeLanguage }}
? ? </div>
</template>
<script>
import { setup } from 'vue'
export default {
? ? name:"firstVueProJectInVue3",
? ? setup() {
? ? ? ? var welcome = "月影WEB 歡迎大家來學習各種技術知識份殿！"
? ? ? ? return { welcome }? ? ?
? ? },
}
</script>
組件代碼的開發(fā)根據(jù)項目需要來做膜钓。
4.使用webpack來編譯vue3項目代碼。
在終端中輸入：npm run dev-build-server
這樣就執(zhí)行了package.json中scripts的dev-build-server
這樣項目的根目錄就會多出一個build這個文件夾卿嘲，而編譯好的代碼就在build這個文件夾下的development這個文件夾下颂斜；
如下圖：
圖4
編譯的bundle.js文件也被注入到了index.html之中，也能在index.html中看到引用了bundle.js拾枣；
之所以編譯文件會在這個目錄文件夾下是因為在配置文件webpack.dev.config.js中對編譯文件進行了配置焚鲜；
也就是如下代碼：
? ? output:{
? ? ? ? path:path.resolve(__dirname,'./build/development'),? ? // 動態(tài)獲取出口路徑(絕對路徑)-文件編譯后的位置
? ? ? ? filename:'bundle.js'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 出口文件名
? ? },
圖5
然后可以直接打開這個index.html網(wǎng)頁放前，如下圖：
圖6
瀏覽器上面就顯示了vue所編寫的代碼內(nèi)容："月影WEB 歡迎大家來學習各種技術知識糯彬！"
注意：網(wǎng)頁文件以瀏覽器的方式打開的地址欄路徑為本地的絕對路徑。
5.使用webpack來啟動vue3項目的服務撩扒。
在package.json中的scripts屬性中加入："dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress"
webpack-dev-server --open chrome 表示在谷歌瀏覽器里面啟動服務；
--config ./webpack.dev.config.js --progress 表示項目是根據(jù)webpack.dev.config.js這個配置文件進行配置來啟動服務的搓谆；
在終端中輸入：npm run dev-server
圖7
這樣就啟動了該項目服務了，瀏覽器效果如下圖：
圖8
注意：以服務方式啟動的項目地址欄的路徑是localhost加端口號泉手，而當前啟動的服務器地址為：http://localhost:8082/
如果你需要自己配置服務的端口號的話，只需要在webpack.dev.config.js 這個配置文件中加入以下代碼：
devServer:{
port:8888, // 設置端口號斩萌，如果沒有設置屏轰，會默認端口號
}
如下圖：
圖9
然后關閉之前的服務之后憋飞，重新在終端中輸入：npm run dev-server
瀏覽器效果如下圖：
圖10
從圖中可以看到端口號已經(jīng)變?yōu)榱嗽O置的8888了。
這樣一個完整的vue3+webpack項目的基礎就完成了榛做，接下去就是根據(jù)項目需求來補充和完善依賴項、配置項检眯、頁面內(nèi)容等等了厘擂。
另外后面的文章也會對vue3的項目進行進一步完善驴党。
關注公眾號（月影WEB），了解更多的前后端知識获茬；
歡迎大家關注互相交流學習港庄；
