Vue3.x+Vite+TS 项目搭建

使用Vite初始化项目

• 注意：使用Vite构建项目，Node.js版本需要大于12.0.0

npm init @vitejs/app
复制代码

1. 输入项目名称

   

2. 选择框架，这里我们选择vue

   

3. 选择TypeScript

   

4. 到这里项目就初始化完成

   

5. 切换到项目目录下，安装依赖，启动项目

npm install
npm run dev
复制代码

修改配置文件

Vite的配置文件vite.config.ts在项目根目录下。

简单配置一下，更多内容可以查看Vite官网vitejs.dev/config/

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') //  @ 指向 src 目录
    }
  },
  base: './', // 打包路径
  server: {
    port: 3000, // 服务启动端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域

  }
})
复制代码

注意： path找不到可以安装一下@types/node

npm i @types/node -D
复制代码

配置Vue Router 和 Vuex

1. 安装vue-router@4 和 vuex@next

npm i vue-router@4
npm i vuex@next
复制代码

2. 创建路由配置文件

   在src目录下新建router目录，在目录中新建index.ts文件

   一般将页面组件存放在Views目录下

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'

import Home from '@/views/home.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
复制代码

3. 创建Vuex配置文件

   在src下新建store目录，在目录中新建index.ts文件

import { createStore } from 'vuex'

export default createStore({
  state() {},
  mutations: {},
  actions: {},
  getters: {}
})
复制代码

4. 在main.ts中挂载路由和Vuex配置

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

import store from './store/index'
import router from './router/index'

const app = createApp(App)

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

app.mount('#app')

复制代码

规范目录结构

├── publish/
└── src/
    ├── assets/               // 静态资源目录
    ├── components/           // 公共组件目录
    ├── router/               // 路由配置目录
    ├── store/                // 状态管理目录
    ├── style/                // 通用 CSS 目录
    ├── utils/                // 工具函数目录
    ├── views/                // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── index.html
├── tsconfig.json             // TypeScript 配置文件
├── vite.config.ts            // Vite 配置文件
└── package.json
复制代码