#0. 前言＋环境配置

前言

Hi!我是SingYo，谢谢你点进来看这个系列！
这是我第一次参加铁人赛。

其实说30个前端「任务」有点笼统，较精确的说法会像是UI元件（UI component），我会在这个月内完成30个元件的开发。而这30个UI元件的idea主要是来参考50 Projects In 50 Days这套课程。

上述课程内容是用原生JS撰写，但我会另外改写成Vue 3.0 Composition API版本，最後把所有的元件放在一个专案里做呈现。专案主要是透过Vite + Vue 3 + Tailwindcss 2.2来开发。

本系列文章的标题并不会用第几天来陈列，而是每个元件的序数，比方说#1是A元件、#2是B元件。但基本上我会在每一天都分享一个元件，但Vue版本部分不一定会同步。因此有时候文章标题会出现不同的序数。待整个系列挑战完成了，我会一一把同一个组件的不同版本编辑到同一篇。（抱歉在阅读上不这麽友善..）

原本要在 自我挑战组 开始这个系列，但因为主题是跟modern web有关，想想还是从这里开始，内容部分若有什麽疏漏和观念错误之处，还请看倌们不吝指教。感谢！

今日任务：建立开发环境

这次专案的主要开发工具如下：

Vite(启动、打包速度很快)
tailwindcss（觉得jit模式用起来很舒服）
Vue 3（vue-router, vuex)

step1. 安装Vue3、Vite

npm init @vitejs/app 30WidgetsMarathon
cd 30WidgetsMarathon
npm install
npm run dev

终端机截图：

step2. 安装tailwind css

npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p // 产生config.js档

这里的postCSS可以透过js加入css，而autoprefixer是用来为css属性加上各个浏览器的前缀。

step.4 於/src/assets底下建立index.css，将tailwindcss引入

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

step.4 安装vue-router

npm i vue-router@4

step.5 於src新增router资料夹，并建立index.js

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '/src/components/Home.vue'
const routes = [
  {
    // 设定根路径
    path: '/',
    name: 'Home',
    component: Home
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

於src/main.js引入router/index.js和index.css

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

// 新增
import router from './router'
import './index.css'

// 挂载Vue前先使用router
createApp(App).use(router).mount('#app')

in src/components/Home.vue

<template>
  <Header>
     <!-- 可以在[]中输入自定义数值，代表just in time mode 设定成功 -->
    <p class="text-center bg-blue-800 text-red-50 text-[30px]">30 Widgets Marathon</p>
  </Header>
</template>

<script>
</script>

<style scoped>
</style>

step6. 重整入口档案 src.App.vue

<template>
	<!-- 在这里就可以直接使用tailwindcss -->
  <div class="m-4">
  <!-- 设定第一层component的路径模板，作为route的进入点 -->
    <router-view />
  </div>
</template>

此时的画面，代表tailwindcss jit mode运作正常。

详细专案架构，请查看GitHub Repo

遇到的问题

1. 最初是想说Vue cli来引入tailwindcss，但目前的cli工具不支援最新的tailwind 2.2版本，因此转换成轻量、速度也快的vite来建立专案。
2. 第二个问题是在Vite当中使用tailwindcss的jit模式，後来参考一阵官方文件才设置完成。详见repo内的config.js设定档们。
3. 原本想要部署到github page，让大家见到live demo，但遇到一点问题。显示的是blank page，目前还在研究中。（day3.更新：已改用Vervel部署专案）

明日任务预告

1. 将专案部署到github page
2. 在Header右上角加上弹出式SearchBar

关於我

前端难民一枚，曾做过杂志编辑、音响店店长，是两个孩子的父亲。（老大开学了，终於 T_T）