最熱門的網頁前端框架,了解流程架構及實作Vue.js 網頁篇 發佈日期: 2022-01-122022-01-07 作者: yijun Photo credit:Pexels 文、意如老師 續上一篇:最熱門的網頁前端框架,從零開始學Vue.js 安裝篇 任務一:認識目錄結構任務二:了解整個流程,及實作第一個Vue.js網頁 任務一:認識目錄結構 續 上一篇 安裝好後,先到專案資料夾下,目前的目錄結構如下圖 我們先來認識一下幾個比較常會用到的資料夾 資料夾 說明 build 這個資料夾中可以放一些環境的配置,例如開發時用的程式版本node.js或是npm的版本等等,有關環境配置的檔案都會放在此資料夾內 config 程式常會使用的目錄路徑,或者port號等等的資訊會放在此資料夾下 node_modules 會使用到的套件都會放在此資料夾下,也是安裝npm時會附帶的套件 src 開發的項目都會放在此資料夾內,例如我們寫的程式碼就全都會放在src這個資料夾內 src/assets/css 放置會使用到的CSS src/assets/images 放置會使用到的圖片,如icon、logo等圖 src/components 放置組件 src/App.vue 功能的入口 main.js 核心的文件也是整個專案的主要入口點,透過它連接到這個專案主要的根(功能)App.vue static 靜態資源目錄,如圖片、字體等,放在這個資料夾,不會被webpack處理 test 初始測試目錄,可刪除 .xxxx文件 這些是一些配置文件,包括語法配置,git配置等 index.html 首頁入口文件 package.json 專案配置文件 README.md 專案的說明文檔,markdown 格式 babel babel是一個轉碼器,因為目前瀏覽器對於新型態JavaScript語法支援度不高,babel-loader可將ES6或ES7語法轉為支援度高的ES5的語法。 ESLint ESLint目的是改善程式碼品質,發現與調整程式碼的問題達到一致性,所以有安裝此套件的話,常常會在編譯執行時看到很多警告訊息,如果安裝之後想要忽略ESLint檢查,可以到.eslintignore文件中做修改。 任務二:了解整個流程,及實作第一個vue.js網頁 首先開啟專案的主要入口點main.js以及index.html 接著修改main.js檔案,如下圖 ▶ Index.html 為專案開始的樣板,預設要顯示的網頁內容顯示於 中。▶ main.js程式解說:var myvue = new Vue({ }) //每個 Vue 都需要通過實例化 程式碼參考如下: new Vue({ el: // index.html 中 id名為app router: //傳入 vue-router元件(ES6) components : //會使用到UI子元件(App.vue) template ://表示html模板套用至 的 el 的標籤 }) 接下來cmd(命令提示字元)執行指令:npm run dev這個指令會啟動http server,這個指令會同時開啟根目錄下的index.html與src資料夾內的main.js這兩個檔案 main.js也會同時運行App.vue以及在router資料夾內的index.js ▶ App.vue程式解說:<route-view/>是路由器顯示標籤,為vue-router使用,在index.js下Router函數中所使用的UI元件皆會套用至這個標籤當中。簡單的說這邊樣板設定會套用至main.js ▶ index.js程式解說:index.js 是由路由配置,定義路徑和UI元件,可以在Router這個函數內,自定義url路徑名稱(path),components下可以放入寫好的UI元件。 <router-view/> 為Vue-router使用,這樣index.js Router 這個函數下寫的components才會顯示出來 所以我們要產生新的UI元件,就要寫一個.vue檔,可放置在components資料夾之下;如要顯示這個vue元件,就需要到index.js中修改路由配置。例:在src/components 新增 mytest.vue路徑:src/components/mytest.vue 程式碼參考如下: <template> <div class=”myfont”> {{mymsg}} </div></template> <script>export default{ data(){ return{ mymsg:”hi,mymsg!” } }} </script> <style> .myfont{ background:yellow; }</style> 再開啟路徑:src/router/index.js,程式碼參考如下:import Vue from ‘vue’import Router from ‘vue-router’import HelloWorld from ‘@/components/HelloWorld’import mytest from ‘@/components/mytest’ Vue.use(Router) export default new Router({ routes: [ { path: ‘/’, name: ‘HelloWorld’, component: HelloWorld }, { path: ‘/mytest’, name: ‘mytest’, component: mytest } ]}) 執行結果:到cmd(命令提示字元)執行 npm run dev 下指令啟動server(伺服器)後,瀏覽器網址列輸入http://localhost:8080/#/mytest,會如下圖所示,你的第一張vue.js網頁已經完成了。 啟動後,只要一修改程式碼,瀏覽器上的這張網頁也都會自動更新,最後如果要關閉專案執行只要在cmd(命令提示字元)中輸入:Ctrl+C即可關閉整個專案。 加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧! 不同頻道,不同知識! Facebook Instagram Youtube 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關