搭建vue3+vite+ts

交流QQ群:555913397
有什么问题可以加群大家一起交流

vue3+vite+ts开发笔记

1.创建项目

1.1 vite初始化项目

npm init vite@latest
√ Project name: ... DontStarveWeb
√ Package name: ... -dontstarveweb
√ Select a framework: » Vue
√ Select a variant: » TypeScript

1.2 配置端口映射

server:{
    host: '0.0.0.0',
    port: 8080,
    open: true
}

添加到 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host: '0.0.0.0',
    port: 8080,
    open: true
}
})

1.3 vite配置别名 使用@代替src

yarn add @types/node --save-dev

    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, 'src')
            }
        ]
    }

添加到 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    server: {
        host: '0.0.0.0',
        port: 8080,
        open: true
    },
    resolve: {
        alias: [
            {
                find: '@',
                replacement: resolve(__dirname, 'src')
            }
        ]
    }
})

2.安装依赖

2.1 安装router

安装router

yarn add vue-router

新建router文件夹,文件里新建index.ts

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

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/components/HelloWorld.vue')
    }
]

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

export default router

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

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

2.2 安装Pinia

安装pinia

yarn add pinia

安装pinia数据持久化插件

yarn add pinia-plugin-persistedstate

创建pinia文件

新建store文件夹,文件里新建index.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

3.eslint css预处理器sass安装

3.1 ts使用@符号引入

  "baseUrl":".",
  "paths":{
    "@/*":["scr/*"]
  },

添加到 tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "removeComments": false,
        "strict": true,
        "jsx": "preserve",
        "sourceMap": false,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        "baseUrl": "./",
        "paths": {
            "/@/*": ["src/*"]
        },
        "types": ["element-plus/global"]
    },
    "exclude": ["node_modules"]
}

如果打包报错 vue-tsc --noEmit ^^ viete build
添加以下选项 忽略所有的声明文件(*.d.ts)的类型检查

"skipLibCheck":true

ts排除 node_modules

"exclude":["node_modules"]

3.2 安装eslint

yarn add eslint eslint-plugin-vue

新建.eslintrc.js文件

module.exports = {
    root: true,
    parserOptions: {
        sourceType: 'module'
    },
    parser: 'vue-eslint-parser',
    extends: [
        'plugin:vue/vue3-essential',
        'plugin:vue/vue3-strongly-recommended',
        'plugin:vue/vue3-recommended'
    ],
    env: {
        browser: true,
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
    }
}

3.3 安装sass

yarn add sass sass-loader

3.4 安装element plus

yarn add element-plus

main.ts引入

import { createApp } from 'vue'
import '@/style.css'
import App from '@/App.vue'
import router from '@/router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

3.3 安装element icon

yarn add @element-plus/icons 

main.ts引入

import { createApp } from 'vue'
import '@/style.css'
import App from '@/App.vue'
import router from '@/router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons'
import { appendFile } from 'fs'

const app = createApp(App).use(router).use(ElementPlus)
// 循环注册所有图标
for (const name in Icons) {
    //name 为icon名称，也是组件名称。使用时：<Edit />，
    //也可以按需增加前缀或者后缀
    // eg: app.component(`eurake-name-${name}`,(Icons as any)[name])
    // 使用时：<eurake-name-Edit />
    // 当然你也可以写一个方法把首字母大写的图标名称改成小写等你想要的任意格式
    app.component(name, (Icons as any)[name])
}
app.mount('#app')