输入命令： npm 6.x npm create vite@latest my-vue-app --template vue n pm 7+, extra double-dash is needed: npm create vite@latest my-vue-app -- --template vue ## latest可以换成指定的vite版本 my-vue-app换成自己的项目名 ##本机环境是node16.18.1 npm是8+ 因此使用vite4 ##示例： npm create vite@4.1.0 mumudemo -- --template vue
mumudemo项目（基于Vite + Vue项目）│
├── node_modules 目录 （vue 项目的文件依赖存放在这个文件夹。）
│ ├── 所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下。
├── public 目录：存放项目公共资源。如网站LOGO等。
│ │ 通常我们不需要对public文件夹内的资源做任何修改。
│ │ 后续在构建打包时，public内容会直接放到dist文件夹内plugins插件资源；
├── src 目录 ：存放 vue 项目的源代码。其下的各个文件（文件夹）分别为：
│ ├── assets 目录 ：资源文件，存放 css，图片等资源。
│ ├── component 目录 ：组件文件夹，存放 vue 的公共组件（核心）
│ │ （注册于全局，在整个项目中通过关键词便可直接输出）。
│ ├── router 目录 ：用来存放 index.js，用来配置路由，定义各个页面对应的URL。
│ ├── store 目录 ：组件文件夹，存放 vue 的公共组件
│ ├── views 目录：放主体页面，vue 文件是可以用来充当路由 view 的。
│ ├── tool：用来存放工具类 js，
│ │ 将 js 代码封装好放入这个文件夹可以全局调用
│ │ （如api.js，http.js 是对 http 方法和 api 方法的封装）。
│ ├── main.js：是项目的入口文件，初始化 vue 实例，并引入所需要的插件。
│ ├── app.vue：是项目的主组件，所有页面都是在该组件下进行切换的。
├── package.json 存放项目的依赖配置
├── .gitignore。
├── tsconfig.json
├── tsconfig.node.json
├──index.html
└──vite.config.ts
安装配置文件路径插件
npm install --save-dev @types/node
在 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 // ****************** 路径配置新增
} // ****************** 路径配置新增
})
其次在tsconfig.json中配置（在compilerOptions中配置）
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
}
以上配置完成后文件路径都可以写成 “@”
配置路由
npm install vue-router@4
在src目录下 创建 routes文件夹（用做放路由js文件）和views文件夹（用做放页面文件）
在routes文件夹下创建 index.ts
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'home',
component: () => import('@/views/one.vue')
},
{
path: '/two',
name: 'two',
component: () => import('@/views/two.vue')
}
]
})
// 导出
export default router
在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就好
写好路由容器（这里是在app.vue里面编写）
<router-view></router-view>
编写代码测试
<template>
<div>
<div>
我是one页面<br>
<button @click="show">准备去two页面</button>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'; //引入使用router
const router = useRouter( );
const show = ()=> {router.push("/two")}
</script>
<style scoped>
</style>