【web-music】【Vue3.x+Vite+TypeScript+Router4+Pinia+Less+Element Plus】快速搭建

配置环境

vue3x

npm install vue -g

vite 脚手架初始化项目

# npm 6.x
npm init vite@latest my-vue-app --template vue-ts

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue-ts

配置别名

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'),
    },
  },
})

提示path类型未找到，需要安装

npm install @types/node -D   

鼠标点击别名能正常挑战需要配置 baseUrl和paths

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

安装依赖

# 进入目录
cd my-vue-app

# 安装依赖
npm install

# 运行
npm run dev 

可以看到

Router4.x

npm install vue-router -S

// src\router\index.ts
import Home from "@/views/Home.vue";
import {createRouter, createWebHashHistory} from 'vue-router'
const routes = [
  { path: '/', component: Home },
]

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

export default router

// src\main.ts
import { createApp } from 'vue'
app.use(Router)

pinia

npm install pinia -S

// src\main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

Less

npm install less less-loader -D

Element Plus

npm install element-plus --save

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

完成搭建