Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

下面我来详细讲解“Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现”的完整攻略。

准备工作

在开始搭建项目骨架之前，我们需要先完成一些准备工作：

1. 确认已安装 Node.js
2. 安装 Vue CLI 4 或更高版本：npm install -g @vue/cli
3. 创建项目：vue create my-project

安装 Vite

Vite 是一个新型的前端构建工具，它可以快速构建现代化的 Web 应用程序。安装 Vite 可以使用以下命令：

npm init vite-app my-project --template vue-ts
cd my-project
npm install

引入 NaiveUI

NaiveUI 是一个基于 Vue.js 3.0 的 UI 组件库，提供了丰富的 UI 组件和模板，可以大幅增强开发效率。我们可以使用以下命令来安装 NaiveUI：

npm i naive-ui

配置 TypeScript

由于我们使用了 Vue CLI 4 和 Vite，因此 TypeScript 的配置将会更加简单。只需要在项目根目录中创建 tsconfig.json 文件，然后在其中添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "esModuleInterop": true,
    "strict": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

配置 eslint

在使用 TypeScript 时，我们也需要安装一些插件来支持 eslint。我们可以使用以下命令来安装这些插件：

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-vue

然后在项目根目录中创建 .eslintrc.js 文件，添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    NodeJS: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
  plugins: ['@typescript-eslint'],
};

搭建项目骨架

接下来，我们就可以开始搭建项目骨架了。我们可以按照以下步骤来实现：

1. 创建 src/plugins/naive-ui.ts 文件，添加以下内容：

```ts
import { createApp } from 'vue';
import naive from 'naive-ui';

export default (app: ReturnType): void => {
app.use(naive);
};
```

1. 更改 main.ts 文件的内容，添加 NaiveUI 插件：

```ts
import { createApp } from 'vue';
import naiveUI from './plugins/naive-ui';

import App from './App.vue';
import router from './router';
import store from './store';

const app = createApp(App);

app.use(router);
app.use(store);
naiveUI(app);

app.mount('#app');
```

1. 更改 tsconfig.json 文件，排除 vue 和 naive-ui 的类型检查：

json
{
"compilerOptions": {
...
"types": ["vite/client"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"tests/**/*.ts",
"tests/**/*.tsx",
"shims-vue.d.ts"
],
"exclude": ["node_modules", "naive-ui/**", "vue/**"]
}

示例

下面是两条示例说明：

示例一

在项目中使用 NaiveUI 提供的按钮组件展示 Hello World：

1. 在 views 目录下创建 Home.vue 文件，添加以下内容：

```html

```

1. 在 router/index.ts 文件中添加以下内容：

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

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

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});

export default router;
```

示例二

在项目中使用 NaiveUI 提供的卡片组件展示一个待办事项列表：

1. 在 views 目录下创建 TodoList.vue 文件，添加以下内容：

```html

```

1. 在 router/index.ts 文件中添加以下内容：

ts
const routes: Array<RouteRecordRaw> = [
{
path: '/todolist',
name: 'TodoList',
component: () => import(/* webpackChunkName: "about" */ '../views/TodoList.vue'),
},
];

这样就完成了使用 Vue3+TS+Vite+NaiveUI 搭建一个项目骨架实现的攻略，希望能对你有所帮助。