vite创建项目

vite创建项目

1. 使用 npm 或 yarn创建项目

npm create vite@latest

yarn create vite

2. 下载 pinia 状态管理

npm install pinia

yarn add pinia

在 src下创建 store 用来使用 pinia

// src/store/index
// 想要使用必须先引入 defineStore；
import { defineStore } from 'pinia';
// 这里我们使用的是es6 的模块化规范进行导出的。

// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）

// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
export const useStore = defineStore('main', {
    state(){  // 存放的就是模块的变量
        return {
            
        }
    },
    getters:{ // 相当于vue里面的计算属性，可以缓存数据

    },
    actions:{ // 可以通过actions 方法，改变 state 里面的值。

    }
})

在main.js 或者 main.ts 中引入。

// main
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')

3. 安装路由

npm install vue-router@4

yarn add vue-router@4

在 src 目录下创建 routr文件夹,和里面的index

// src/router/index
import {createRouter, createWebHistory} from 'vue-router'

const routes = [
	 {
        path: "/",
        redirect: "/home"
    },
    {
        path: '/home',
        name:'home',
        component:() => import("../views/Home/index.vue")
    },
]

const router =createRouter({

    history: createWebHistory(),
    routes,
})
export default router;

在APP中引入路由

<template>
    <router-view></router-view>
</template>

在 main.js 中注册

// main.js
import router from './router/index.js' // 加载 router 底下的 index.js 路由配置文件

app.use(router)
// app.use(router) 需要放在 app.mount('#app') 之前

安装 sass

 npm install --save-dev sass