Vite+Vue3.x 基本项目搭建

1. 安装 Vite 和 Vue3.x

首先，我们需要安装 Vite 和 Vue3.x。您可以使用以下命令进行安装：

npm install -g vite
npm install -g @vue/cli

2. 创建一个新的 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create vite-vue3-project

3. 将项目切换到 TypeScript

现在我们需要将项目切换到 TypeScript。首先，我们需要安装 TypeScript：

npm install -D typescript

然后，我们需要在项目中创建一个 tsconfig.json 文件。这个文件用于配置 TypeScript：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["es2015"],
    "jsx": "react",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false
  },
  "include": ["src"]
}

最后，我们需要将项目中的 .js 文件修改为 .ts 文件。

4. 安装需要的依赖项

接下来，我们需要安装一些必要的依赖项：

npm install -D vue-router
npm install -D axios
npm install -D vuex

5. 配置 Vite

我们需要在项目中创建一个 vite.config.js 文件。这个文件用于配置 Vite：

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}

6. 配置 Vue Router

我们需要在项目中创建一个 router.js 文件。这个文件用于配置 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

7. 配置 Vuex

我们需要在项目中创建一个 store.js 文件。这个文件用于配置 Vuex：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

export default store

8. 创建组件

现在我们可以开始创建组件了。首先，我们需要创建一个 Home.vue 文件：

<template>
  <div>
    <h1>Home</h1>
    <p>This is the home page.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

9. 运行项目

现在我们可以运行项目了：

npm run dev

项目将在 http://localhost:3000 上运行。

10. 构建项目

如果我们想要构建项目，我们可以使用以下命令：

npm run build

构建后的项目将在 dist 文件夹中。