前言
今天並不是一個完整的專案，只是一個非常非常簡單的component! 404page!
有在用vue開發的朋友對於vue-cli或是Nuxt.js應該都不會太陌生，尤其vue-cli對於初學的使用者來說相當的簡單好用，不過一般我們在學習時用的都會是default的設定，今天就來記錄一下怎麼樣在專案創始階段就載入你所需要的插件!最後我們再配合vue-router弄個簡單的404page!
使用技術
- vue-cli
- bootstrapVue
- Sass/SCSS
- vue-router
簡單的手動設定流程
若你還沒安裝vue-cli，可以藉由以下指令進行全域安裝。
npm install -g @vue/cli
接著在終端機輸入指令
vue create my-project
你應該會看到以下的畫面，有default & Manually select features(有多一個不要管，文章最後會說明為什麼會有vue-adopt這選項)。
點選後你會看到一連串的清單，按下空白(space)就可以選擇你要加裝的套件，這邊我選擇Router Vuex & Css預處理。
接著會有一連串的次要設定，這些就不是本篇的重點，我會簡單帶過。
Use history mode for router?Yes
Pick a CSS pre-processor Sass/Scss (with node-sass)
Pick a linter / formatter config: Basic
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
最後則會問你
Save this as a preset for future projects? (y/N)
也就是你是否想要將以上的設置作為一個preset存起來供你以後使用，會要求你輸入這個preset的名稱，這就是一開頭的vue-adopt的由來了~!
執行完後你的專案架構應該會長這個樣子~!因為有追加vuex & router，會與預設的稍為不一樣。
製作簡單的404page並與router連接
首先先在views裡面增加一個NotFound.vue檔案，並寫入以下內容
//NotFound.vue
<template>
<div>
<div class="containers d-flex flex-column align-items-center justify-content-center">
<h1>
4
<span></span>
4
</h1>
<p>The page you are looking for might have been remove had it's name changed or its temporaily unavailable</p>
<router-link to="/" class="btn btn-primary">
Home page
<b-icon icon="cursor-fill" variant="dark"></b-icon>
</router-link>
</div>
</div>
</template>
<style lang="scss" scoped>
.containers {
width: 100vw;
height: 100vh;
background-color: #333;
margin: 0;
padding: 0;
color: #ffffff;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 10rem;
display: inline;
& > span {
display: inline-block;
width: 120px;
height: 120px;
background-image: url("../../public/img/emoji.png");
background-size: cover;
margin: 0px;
}
}
.btn {
border-radius: 40px;
}
}
</style>
接著到router/index.js中引入NotFound並串接，之後可能會有個vue-router的教學文章，這邊就簡單帶過:D
import NotFound from '../views/NotFound.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '*',
name: 'notFound',
component: NotFound
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
這樣當你啟動網站後，隨便在輸入不存在的url時便會將你帶到你剛剛設置好的404page囉!
參考文章
Danny的學習紀錄 