vite创建Vue3 + 配置路径 + sass + router(配置路由) + pinia（手把手教程）

一，创建项目

1）在需要放项目的盘符创建文件夹，并在文件夹的目录输入 cmd + 回车进入运行命令符操作栏（我这里是D盘符中的project文件夹里）

​

​

 2）输入： npm create vite@latest    回车

3）依次按照下图方式执行 

​

 4）按照指示依次执行指令

​

​

到此项目 已经创建完成，接下来用开发工具打开项目进行后面一系列的创建（这里用的vscode）

二，配置路径

ps：可安装也可不安装，因为后期我在创建路由的时候遇到过坑，指向不到router，索性在这里就安装了，这样以后的路径都用'@'会很方便。

1）npm install --save-dev @types/node

2) 在vite.config.ts中配置（可直接全部复制替换）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// *********************************** 路径配置新增 start  
import { resolve } from 'path'

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

 3）在tsconfig.json下（在compilerOptions中配置）

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

​

以上配置完成后文件路径都可以写成 “@” 

如果你想在ts文件里面可以写js继续在上图后跟上（这个demo加了）或者在建项目的时候直接选择JavaScript。

"allowJs": true

三，安装sass

npm install sass

安装完后css可进行 嵌套等一系列写法。

---

接下里配置路由和pinia，我们先将项目‘清理一下’ ,为后面做准备

1）清空app.vue页面，删除HelloWorld.vue

​

 2）在src目录下 创建 router文件夹（用做放路由ts文件）和views文件夹（用做放页面文件）

 3）在index.html中对全局样式进行处理（看情况）

body,
  html,
  #app {
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: initial;
  }

---

 四，配置路由

1） npm install vue-router@4

2）在router文件夹下创建 index.ts(配置)， 在views文件夹下创建one.vue , two.vue两个页面(测试用)

3）在main.ts中：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/routes/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
//这里稍微整理了一下代码 可以不按照这种写法，直接引入你的index.ts就好
//如果不明白也可直接复制

 4）在index.ts中：

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'one',
            component: () => import('@/views/one.vue')
        },
        {
            path: '/two',
            name: 'two',
            component: () => import('@/views/two.vue')
        }
    ]
})
// 导出
export default router

 5）写路由容器（这里是在app.vue里面）

<router-view></router-view>

6）测试 ，这里我用路由从one页面跳转到two页面

五，安装pinia 

1）npm install pinia

2）在main.ts引入pinia

import { createPinia } from 'pinia';//导入pinia
const pinia = createPinia();
app.use(pinia);

3）在src目录下 创建 store文件夹 在store下创建index.ts 作为仓库使用

4） 在index.ts

import { defineStore } from 'pinia';
const useCounter = defineStore("counter", {
    state: () => ({
        count: 1,
        num: 100,
    }),
})
export default useCounter
//返回的函数统一使用useXXX作为命名方案 方便

 5）在页面使用

<template>
    <div class="container">
        现在是two页面
        <br>
        <div>我是从pinia中的counter中的num值：{{ countStore.num }}</div>
        <div>我是解构出来的count：{{ count }}</div>
    </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import userCount from '@/store/index';

const countStore = userCount()
const { count } = storeToRefs(countStore)

 以上已经全部完成。