首页 前端知识 使用vite创建Vue3项目 配置路径 配置路由(手把手教程)

使用vite创建Vue3项目 配置路径 配置路由(手把手教程)

2024-03-05 09:03:45 前端知识 前端哥 523 951 我要收藏

 创建项目:

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页面:

 测试:

 成功!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3270.html
标签
npm
评论
会员中心 联系我 留言建议 回顶部
复制成功!