vite新建vue3项目及安装插件笔记

npm create vite@latest

用vite创建的项目需要手动安装一些常用的插件

1.安装router插件

npm install vue-router@4

手动创建配置路由文件

main.js

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


const app = createApp(App)
app.use(router)//路由
app.mount('#app')

创建src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'

const routes = [
  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },
  // {
  //   path: '/about',
  //   name: 'about',
  //   component: () => import('../views/AboutView.vue')
  // }
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

export default router

2.安装sass预处理器（文件后缀为.css）

npm install sass sass-loader --save-dev

在style中添加

<style lang="scss">
</style>

3.配置 alias 别名

npm install -D @types/node

vite.config.ts 增加 resolve 配置：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {//resolve配置
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  }
})

根目录新建jsconfig.json文件（我测试了好像不需要配置这步也可以，原因不详）

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