安装vite

使用npm

npm create vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

还有一些选择配置比如使用那种框架,我使用的vue,还有使用JavaScript等以及项目的命名

还可以通过附加的命令行选项直接指定项目名称和想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x

npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:

npm create vite@latest my-vue-app -- --template vue

# yarn

yarn create vite my-vue-app --template vue

# pnpm

pnpm create vite my-vue-app --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

安装vue-router路由

1.先安装路由

使用npm:安装最新版的路由到开发环境中

npm i vue-router -D

使用yarn:意思是安装4版本的路由

yarn add vue-router@4

2.创建index.js文件

在src目录下新建router目录,并新建index.js文件

//1.从VueRouter中导入需要的函数模块

import {createRouter, createWebHashHistory } from 'vue-router'

// 2.导入 HelloWorld.vue 组件

const routes = [

  { path: '/', component: () => import('../components/HelloWorld.vue')}

]

// 3. 创建路由实例并传递 `routes` 配置

// 你可以在这里输入更多的配置，但我们在这里

// 暂时保持简单

const router = createRouter({

  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。

  history: createWebHashHistory(),

  routes, // `routes: routes` 的缩写

})

//导出router

export default router

3.接着还要到main.js文件中把router挂载上去

import { createApp } from 'vue';

import App from './App.vue';

import router from './router/index'; //导入router配置文件

const app = createApp(App);

app.use(router); //挂载router

app.mount('#app');

4.使用的话记得要给路由搞个出口

app.vue文件中

<template>

	<router-view /> //使用的router-view

</template>

安装状态管理工具

额等我有空在写这个部分,有上面的两个部分简单学习使用能搭建页面出来正常使用了

巴特西

vite安装使用流程