(使用vite搭建vue3项目（vite + vue3 + vue router + pinia + element plus）)

npm init vite@latest

3.填上自己的项目名称回车

在这里插入图片描述
4.选择 vue 回车

5.选择Ty peSc rip t回车

6.项目创建完成

或者一步到位通过附加的命令行选项直接指定项目名称和你想要使用的模板（根据自己npm 版本来选择不同的命令行）

# npm 6.x
npm create vite@latest vite-vue --template vue-ts
 
# npm 7+, extra double-dash is needed:
npm create vite@latest vite-vue -- --template vue-ts

在这里插入图片描述

安装 依赖，运行项目

1.用你的软件打开创建的项目，在终端进入项目

cd vite-vue

在这里插入图片描述
2.安装默认依赖

npm install

3.运行项目

npm run dev

在这里插入图片描述

初始配置

1.更改 http://local host:3000/到8080与Netwo rk 路由访问（server 对象为新增，其余的都是源代码）

修改 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',//解决vite use--host to expose
    port:8080,
    open:true
  }
})

2.配置 vite别名
vue开发过程中，在引入文件时，习惯使用 @ 代替 src，vite 默认是不识别的，所以需要配置

（1）

 npm install @types/node --save-dev

（2）修改vite.config.ts 配置文件代码，（resolve 对象为新增，其余都是源代码）

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',//解决vite use--host to expose
    port:8080,
    open:true
  },
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  }
})

3）在tsconfig.json 文件中添加配置

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
 // 添加的配置开始
    "baseUrl": ".",
    "paths": {
      "@/*":[
        "src/*"
      ]
    }
//添加的配置结束
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3.安装路由

npm install vue-router@4

（1）在src 目录下新建 router 文件夹，在router里创建 index.ts文件
在这里插入图片描述

（2）在index.ts里面配置路由

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array<RouteRecordRaw&gt; = [
    {
        path: '/',
        name: 'home',
        component:()=>import('../view/home.vue'),
   //我事先在src下面创建了一个view文件夹，在view文件下面创建了home.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";
 
createApp(App).use(router).mount('#app')

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

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

4.安装 css 预处理器 sass

npm install -D sass sass-loader

<template>
  <div class="app">
    <div class="box">
      首页
    </div>
  </div>
</template>
 
<script lang="ts" setup>
 
</script>
 
<style lang="scss" scoped>
.app {
  .box {
    color: #747bff;
  }
}
</style>

5.引入 element–plus

npm install element-plus --save

（1）在main.ts引入

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'
 
createApp(App).use(router).use(ElementPlus).mount('#app')

（2）使用

<template>
  <div class="app">
   <el-button type="success">Success</el-button>
  </div>
</template>
 
<script lang="ts" setup>
 
</script>
 
<style lang="scss" scoped>
</style>

（3）效果
在这里插入图片描述

6.安装 pinia

npm install pinia

（1）在main.ts引入

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 { createPinia } from "pinia";
const pinia = createPinia();
 
createApp(App).use(router).use(ElementPlus).use(pinia).mount('#app')