安装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>

安装状态管理工具

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

原文地址：http://www.cnblogs.com/tn666/p/16926469.html