vite搭建vue3项目

首先按照官网创建项目,yarn create vite 项目名字 --template vue(这里我用的yarn,用npmnpm init vite@latest 项目名字 -- --template vue)

安装依赖 yarn(npm install)

typescript

1. 首先安装 yarn add typescript

2. 然后在项目跟目录下创建ts配置文件 tsconfig.json

/**
 * ts配置文件
 * 配置参考于文档 https://www.cnblogs.com/fangsmile/p/14239529.html
 */
{
    "compilerOptions": {
        "jsx": "preserve", // 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'.
        "target": "esnext", // target用于指定编译后js文件里的语法应该遵循哪个JavaScript的版本的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
        "module": "esnext", // target用于指定编译后js文件里的语法应该遵循哪个JavaScript的版本的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
        "strict": true, // strict的值为true或false，用于指定是否启动所有类型检查
        "moduleResolution": "node" // 用于选择模块解析策略，有'node'和'classic'两种类型'
    },
    "include": [ // include也可以指定要编译的路径列表
        "src/**/*",
        "src/shims-vue.d.ts"
    ],
    "exclude": [ // 要排除的、不编译的文件
        "node_modules"
    ]
}

3. 配置好后，我们要把vite创建的 main.js改为 main.ts,等下再处理main.ts中引入vue文件报错的问题

同时别忘了把index.html中引入位置的 /main.js改为 main.ts

4. 处理引入vue文件报错问题

创建描述文件 shims-vue.d.ts

declare module '*.vue' {
    import {ComponentOptions} from 'vue';
    const componentOptions: ComponentOptions;
    export default componentOptions;
}

vue-router

首先安装依赖yarn add vue-router@^4.0.11

需要指定一个版本，否则会默认安装3.x的版本
npm可以直接npm i vue-router@4
yarn如果想安装最新版本，可以yarn add vue-router@^4.99.99,然后在弹出的版本列表中选择版本就可以了

创建src/router/index.ts文件

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

const router = createRouter({
    history: createWebHashHistory(), // createWebHistory 替代mode
    routes: [{
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component: () => import('@/view/index.vue') // 这里使用@会报错，需要先配置好博客下边的“定义别名(@)”才可以使用
    }]
});
export default router;

然后在 main.ts中注册(use)一下router

...
import router from './router/index'
...
createApp(App).use(router).mount('#app') // 写法随意

store

yarn add vuex@next

定义别名(@)

在项目根目录中，有一个 vite.config.js文件，在其中配置alias就可以了

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { // 这里是我们要增加的配置
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  }
})

设置完后，在vue文件中使用@/xxx/xxx的方式引入ts文件，虽然可以正常运行，但vscode会标红，ts和vetur都会报2307错误（如图）

解决办法：在 tsconfig.json 中也需要配置

{
    "compilerOptions": {
        ...
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    ...
}

引入UI框架(elementUI)

我采用的是按照官网上按需导入（unplugin-vue-components）的方式进行配置的，可参考 elementUI官网链接 和 unplugin-vue-components官方链接

1. 首先还是安装

yarn add unplugin-vue-components

yarn add element-plus

2. 在根目录 vite.config.js文件的 Components中配置ElementPlusResolver

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 需要引入这两个
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({ // 这里是需要配置的内容
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: { // 这是上边介绍中配置的"@"
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  }
})

然后就可以正常使用了

<template>
    <div>
      <el-button>I am ElButton</el-button>
    </div>
</template>

<script lang="ts">
// 不需要引入el-button
export default {
  name: 'index'
}
</script>

eslint

首先 安装 yarn add -D eslint eslint-plugin-vue

然后根目录创建 .eslintrc.js文件就完成了

// 详细配置请自行搜索~
module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
    parserOptions: {
      sourceType: 'module'
    },
    env: {
      browser: true,
      node: true,
      es6: true,
      es2021: true,
    },
    rules: {
      'no-console': 'off'
    }
};