Vite、Vue3和TS快速构建流莺书签项目

前端

2023-12-11 06:52:25

前言

流莺书签是一个用来收藏网站的项目，使用Vite、Vue3和TypeScript进行开发。它具有书签、标签的增加、删除、修改、一键导入、导出配置、自动获取网站图标、标题等功能。

本教程将指导您如何使用这些技术从零开始构建一个流莺书签项目。您将学习如何使用Vite来创建和管理项目，如何使用Vue3来构建用户界面，以及如何使用TypeScript来确保代码的健壮性。

先决条件

在开始之前，您需要确保已经安装了以下软件：

Node.js 16或更高版本
npm 6或更高版本
Git
代码编辑器或IDE（如Visual Studio Code或WebStorm）

项目初始化

首先，创建一个新的项目目录，并使用命令行工具初始化一个新的Vite项目：

mkdir my-vue3-vite-ts-project
cd my-vue3-vite-ts-project
npm init vite@latest

这将在您的项目目录中创建一个package.json文件和一个vite.config.js文件。

安装依赖项

接下来，安装必要的依赖项：

npm install

这将安装Vite、Vue3、TypeScript和其他依赖项。

创建项目结构

接下来，创建项目结构：

src
├── App.vue
├── components
│   ├── Bookmark.vue
│   ├── Tag.vue
│   └── Toolbar.vue
├── pages
│   ├── Home.vue
│   └── Settings.vue
├── router
│   ├── index.js
│   └── routes.js
├── store
│   ├── index.js
│   └── modules
│       ├── bookmark.js
│       └── tag.js
├── styles
│   ├── main.css
│   ├── variables.css
├── utils
│   ├── api.js
│   ├── constants.js
│   ├── helpers.js
│   └── validators.js
└── main.ts

编写代码

接下来，编写代码。这里仅介绍关键部分：

1. App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { createApp } from 'vue'
import router from './router'

createApp({
  router
}).mount('#app')
</script>

2. Home.vue

<template>
  <div class="home-page">
    <h1>流莺书签</h1>
    <p>这是流莺书签的主页。</p>
    <bookmark-list></bookmark-list>
  </div>
</template>

<script>
import BookmarkList from './components/BookmarkList.vue'

export default {
  components: {
    BookmarkList
  }
}
</script>

3. Bookmark.vue

<template>
  <div class="bookmark">
    <div class="bookmark-title">{{ bookmark.title }}</div>
    <div class="bookmark-url">{{ bookmark.url }}</div>
    <div class="bookmark-tags">
      <span v-for="tag in bookmark.tags" :key="tag">{{ tag }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['bookmark']
}
</script>

4. Tag.vue

<template>
  <div class="tag">
    {{ tag }}
  </div>
</template>

<script>
export default {
  props: ['tag']
}
</script>

5. Toolbar.vue

<template>
  <div class="toolbar">
    <button @click="addBookmark">添加书签</button>
    <button @click="addTag">添加标签</button>
    <button @click="importBookmarks">导入书签</button>
    <button @click="exportBookmarks">导出书签</button>
  </div>
</template>

<script>
export default {
  methods: {
    addBookmark() {
      // ...
    },
    addTag() {
      // ...
    },
    importBookmarks() {
      // ...
    },
    exportBookmarks() {
      // ...
    }
  }
}
</script>

6. router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./routes/Home.vue')
    },
    {
      path: '/settings',
      component: () => import('./routes/Settings.vue')
    }
  ]
})

export default router

7. store/index.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    bookmarks: [],
    tags: []
  },
  mutations: {
    addBookmark(state, bookmark) {
      state.bookmarks.push(bookmark)
    },
    addTag(state, tag) {
      state.tags.push(tag)
    }
  },
  getters: {
    allBookmarks: state => state.bookmarks,
    allTags: state => state.tags
  }
})

export default store

8. main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(router)
app.use(store)

app.mount('#app')