Vue3+TS+Vite+NaiveUI 从零搭建项目骨架，引领现代化前端开发潮流

2024-02-01 18:20:11

当我们开始学习Vue.js时，我们可以通过Vue CLI轻松创建项目，但它不是一个长期的解决方案。手动构建一个项目骨架可以帮助我们更好地理解项目结构，提高开发效率，并为未来的扩展奠定基础。

1. 构建项目骨架

使用Vue CLI创建项目时，我们会得到一个包含package.json、src、public等目录的项目结构。我们可以参考这个结构，手动创建一个新的项目骨架。

├── package.json
├── src
│   ├── App.vue
│   ├── main.ts
│   └── index.html
├── public
│   ├── index.html
│   └── favicon.ico
└── .gitignore

2. 安装依赖

接下来，我们需要安装项目所需的依赖项。我们可以使用以下命令：

npm install vue@next typescript vite naive-ui

3. 配置TypeScript

为了使用TypeScript，我们需要在package.json中添加以下配置：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "typescript": "^4.5.5"
  }
}

4. 配置Vite

Vite是一个现代化的构建工具，可以帮助我们快速开发和构建项目。我们在package.json中添加以下配置：

{
  "vite": {
    "plugins": [
      "vue"
    ]
  }
}

5. 创建App.vue

App.vue是Vue应用程序的根组件。它通常包含整个应用程序的布局和逻辑。我们可以创建一个App.vue文件，并添加以下内容：

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

<script>
import { createApp } from 'vue'

const app = createApp({})

app.mount('#app')
</script>

6. 创建main.ts

main.ts是应用程序的入口文件。它通常包含应用程序的初始化逻辑和路由配置。我们可以创建一个main.ts文件，并添加以下内容：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter } from 'vue-router'
import Home from './components/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')