Vue.js小學堂 | Step.2 使用Vue開發專案(Webpack+Vue+Pug+Stylus)

Anna Hsiao

Published in

Anna.Hsaio｜前端開發記

8 min readDec 5, 2019

上一篇簡單的說明了Vue的script引用方式，那要如何完整的使用Vue開發專案呢？這篇文章就來帶大家一起進入專案結構的基本介紹吧！有些眉眉角角和普通的HTML開發方式有所不同，但相信大家都能夠快速上手！

開發環境設定：

首先，一樣要先建立Vue的環境，這裡大家可以自由選擇要不要使用vue-cli來開發專案，或是直接用webpack安裝Vue一步步建立開發環境的方式，這裡我以webpack環境建置來說明

npm i vue vue-loader vue-router

安裝完畢後要記得前往config中加入設定檔

module.exports =
   ...
   module: {
      ...
      rules: [
         ...
         {
            test: /\.vue$/,
            use: [{loader: 'vue-loader',}]
         },
         ...
      ]
      ...
   },resolveLoader{
      extensions: ['.vue'],
   }
   ...

2. Vue的資料夾架構大致上可分為

--dist //Build 檔案
--src //開發環境
---assets  //圖片、影片、音檔等
---components //route分頁
---views //主要頁面
---style //CSS
---js // JS

● views放的是主要頁面，例如首頁或是不需要SPA想要換頁的頁面都可以放在這裡
● components是用來放route的頁面，簡單來說就是在一頁中切換頁面卻不會有重整狀態的頁面

檔案建置：

1. 準備好一個入口HTML檔index.pug

這個檔案算是入口盒子，它還不是首頁而是能夠使用vue的外框盒子

index.pug
--------------------------------------------------------------------
doctype html
html
   include _inc/_meta.pug
   body
      #app

2.引用Vue的文件

在入口文件中引入Vue、vue-router以及vue表現框架的模板

import Vue from 'vue';
import router from '../../utils/routers.js'; //vue-router的設定在第5步驟做說明
import App from "../../public/layout.vue" //載入layout.vue的樣板new Vue({
   render: h => h(App), //表現框架的喧染使用layout.vue的樣板
   router, //vue-router的設定在第5步驟做說明
}).$mount('#app') //將vue呈現在index.pug的#app這個框架中

3.建立Vue的表現框架 layout.vue

要怎麼建立你的網站架構雛型，例如，想把header、footer拔出來，或是網站中有沒有sidebar等等的框架介面就在要這裡開始規劃喔！

<template lang="pug">   #wrapper
      my-header //component的引入header區塊，框架名稱是在JS引入設定時的檔名
      router-view //router頁面呈現區塊
      my-footer //component的引入footer區塊，框架名稱是在JS引入設定時的檔名</template><script lang="babel">   export default {
      ...
   }</script><style lang="stylus" src = '../style/style.styl'></style>

如果你的頁面不一定會有footer或是在某些特定頁面才會顯示sidebar，那你可以在之後的vue檔案中使用component的方式引入框架

＊component的引入方式

page.vue
--------------------------------------------------------------------<script>
   import Footer from '../../public/footer.vue'component引入方式：   1.Vue.component('my-footer', Footer);   or   2.export default{
       component: {
          Footer
       },
   }
</script>

4. 頁面建立，三元素：style、template、script

在製作Vue的專案時，除了入口的副檔名為.html或.pug外，其他頁面皆以.vue的副檔名命名，而.vue的檔案架構有三元素

style：可以直接將CSS編入在這個區塊，或是引用外部的CSS檔案格式
template：編譯HTML的框架區塊在這裡
script：可以直接將JS編入在這個區塊，或是引用外部的JS檔案格式

<style lang="stylus">
//不同的CSS語法只要將lang的stylus改為sass、scss...等等的其他編譯方式就可以囉！
   ...
</style><template lang="pug">
   ...
   //HTML框架
   ...
</template><script lang="babel">
   ...
   export default {
      ...
      //Vue設定
      ...
   }
</script>

習慣使用甚麼語法來編譯程式，除了在webpack config中設定外，還要在這裡加上lang才可以使用喔！
＊webpack config的設定詳情請參考：新手篇或是進階分割篇，文章內都有附上Github可以參考~

5. vue-route SPA換頁

簡單使用Vue讓網頁實現SPA就要引入 vue-routes 作為切換分頁

1.routers.js設定

routers.js
--------------------------------------------------------------------import Vue from 'vue';
import Router from 'vue-router';Vue.use(Router);const router = new Router({
   mode: 'history',
   base: '/',
   routes: [{
      name: 'index',
      path: '/',
      component: () => import('../views/index.vue')
   },{
      name: 'products',
      path: '/products.html',
      component: () => import('../views/products.vue')
   },{
      name: 'about',
      path: '/about',
      component: () => import('../components/about.vue')
   },]
});export default router

2.routes的使用規則

1.頁面呈現區塊：router-view
layout.vue
--------------------------------------------------------------------<template lang="pug">
   #wrapper
      my-header
      router-view
      my-footer
</template>
2.換頁方式： router-link to=”page”
header.vue
--------------------------------------------------------------------
<template lang="pug">
   header
      a(href="/")#logo Vue Sample
      #menu
         router-link(to="/about") About
         a(href="products.html") Products
         router-link(to="/contentus") ContentUs
</template>

以上，基本的Vue專案架構就到這裡結束了，之後我會再整理一包Vue的簡單範例在Github上給大家參考，希望本篇能讓你了解Vue的專案架構要怎麼編寫~那我們下回再見~