从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

首先需要明确，要搭建一个Vite + Vue3 + TypeScript的项目，需要考虑以下步骤：

1. 安装NodeJS和npm：如果你的机器上没有安装NodeJS和npm，请先到Node.js官网（https://nodejs.org/en/）下载安装后，打开cmd或者终端，输入node -v和npm -v，查看是否安装成功。

2. 初始化项目：打开命令行，创建一个新的项目文件夹，使用以下命令初始化一个新的npm项目。这里，我们以myproject为例。

mkdir myproject
cd myproject
npm init

在npm init命令执行后，根据提示填写各项基本信息，然后按Enter键即可。

1. 安装Vite：进入项目根目录，运行以下命令来安装vite。

npm install vite --save-dev

安装后会自动在项目根目录下生成一个package.json文件。

1. 安装Vue 3：运行以下命令来安装Vue 3。

npm install vue@next --save-dev

1. 安装TypeScript：运行以下命令来安装TypeScript。

npm install typescript --save-dev

1. 配置Vite：在项目根目录下新建一个vite.config.ts文件，输入以下代码。

// vite.config.ts

export default {
    root: './src',
    build: {
        outDir: '../dist'
    }
}

这里的配置含义是：

• 指定项目的根目录为“./src”；

• 指定编译后的代码输出目录为“../dist”。

• 配置TypeScript：在项目根目录下新建一个tsconfig.json文件，输入以下代码。

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowJs": true,
        "sourceMap": true,
        "strict": true,
        "jsx": "preserve",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "resolveJsonModule": true,
        "noImplicitAny": false,
        "noImplicitThis": false,
        "lib": [ "dom", "esnext" ]
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

这里的配置含义是：

• 编译的目标是ES6；
• 模块采用ES6；
• ES模块导入的解析规则是Node的方式；
• 允许导入CommonJS模块；
• 生成source map文件；
• 开启严格模式；
• 保留Jsx代码；
• 允许使用实验性的装饰器（decorators）；
• 生成descriptor元数据；
• 支持解析json文件；
• 允许不声明的变量为任何类型；
• 允许不声明this为any类型；

• 引用的库为DOM和ESNext。

• 安装常用模块：运行以下命令安装常用的依赖项，包括vue-router、vuex、axios、lodash和dayjs。

npm install vue-router vuex axios lodash dayjs --save-dev

至此，我们已经完成了一个基础的vite+vue3+ts规范项目搭建。

示例一：使用VueRouter

在安装完vue-router后，在main.ts文件中进行初始化：

// main.ts

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

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

可以看到，这里我们使用了createApp创建Vue 3的实例，并用use方法将VueRouter插件引入，最后用mount方法挂载Vue实例。

在router/index.ts文件中，我们可以初始化VueRouter：

// router/index.ts

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

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

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

export default router

这里创建了两个路由：'/'和'/about'，分别对应Home和About组件。

示例二：使用Vuex

在安装完vuex后，在main.ts文件中进行初始化：

// main.ts

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

createApp(App).use(store).mount('#app')

可以看到，这里我们使用了createApp创建Vue 3的实例，并用use方法将Vuex插件引入，最后用mount方法挂载Vue实例。

在store/index.ts文件中，我们可以初始化Vuex store：

// store/index.ts

import { createStore } from 'vuex'

interface RootState {
    count: number
}

const store = createStore<RootState>({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

export default store

这里创建了一个state对象，其中包含一个状态变量count和一个mutation——increment，用于对count进行加1的操作。

以上为基础的搭建过程和两个示例的使用，另外，在实际的开发过程中，还需要考虑其他的方面，比如代码分割、性能优化、压缩等问题，在实际中需要针对不同的情况和项目进行配置和优化。