创建项目:
1. 在你放项目的盘符创建文件夹,并在文件夹的目录输入 cmd +回车进入运行对话框(我这里是D盘符中的project文件夹中的V3文件里)
接下来可以看到我们直接进入了所选择的文件夹里面(如图)
2. 输入: npm create vite@latest
3.输入项目名称并回车(这里我取的index)
4. 依次选择Vue TypeScript
5. 按照指示输入cd index(cd 你的项目名)&& npm install 并回车
到这里 项目已经创建完成! 可以直接拖到开发工具里面运行项目了(这里我用的是Vscode开发工具)
配置路径:
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/*"
],
}
以上配置完成后文件路径都可以写成 “@”
配置路由:
1. 安装路由:npm install vue-router@4
2. 在src目录下 创建 routes文件夹(用做放路由js文件)和views文件夹(用做放页面文件)
3. 在routes文件夹下创建 index.ts, 在views文件夹下创建one.vue , two.vue两个页面
4. 在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
5. 在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就好
//如果不明白也可直接复制
6. 写好路由容器(这里是在app.vue里面编写)
<router-view></router-view>
7.分别在两个页面写点代码测试路由是否成功
one页面:
如果这个地方你的<script setup>有报错可以在tsconfig.json中添加 "allowJs": true(在compilerOptions中配置)
two页面:
测试:
成功!