使用vite搭建vue项目和配置

使用vite搭建vue项目和配置

1、搭建项目

npm create vite@latest

npm install
npm run dev

2、配置所需依赖

npm install @types/node --save-dev

（1）修改vite.config.ts配置文件代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 需要引入path, 如果报错的话需要npm install --save-dev @types/node
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 设置文件./src路径为 @
    alias: {
      "@": path.resolve(__dirname, "./src"), // 为./src配置别名
    },
},
})

（2）在vue 项目中用@引入文件 根目录下 tsconfig.json 文件中配置

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

3、安装路由
（1）安装依赖

npm install vue-router@4

（2）在src目录下新建router文件夹，在router里创建index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'HelloWorld',
    component:()=>import('../components/HelloWorld.vue'),
  }
]

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

export default router

（3）main.ts中导入挂载路由

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

const app = createApp(App);
app.use(router).mount('#app')

（4）修改App.vue管理路由

<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>
<style>
</style>

4、安装 css 预处理器 sass

npm install -D sass sass-loader

5、引入element-plus

npm install element-plus --save
npm install @element-plus/icons-vue // 图标

6、安装pinia

npm install pinia

7、全局引入pinia和element

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createPinia } from 'pinia'

const app = createApp(App);
// 实例化 Pinia
const pinia = createPinia()
app.use(ElementPlus).use(router).use(pinia).mount('#app')