vue3+vite项目搭建

vite官网

Vite | 下一代的前端工具链 (vitejs.cn)

1. 创建项目

# 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

2. 依次选择vue，js/ts
3. 创建路由

npm install vue-router

在src目录下创建router文件夹新建index.js文件配置路由

// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'

// 导入路由页面的配置
import routes from './routes'

// 路由参数配置
const router = createRouter({
    // 使用hash(createWebHashHistory)模式，(createWebHistory是HTML5历史模式，支持SEO)
    history: createWebHistory(),
    routes: routes,
})

// 全局前置守卫，这里可以加入用户登录判断
router.beforeEach((to, from, next) => {
    // 继续前进 next()
    // 返回 false 以取消导航
    next()
})

// 全局后置钩子，这里可以加入改变页面标题等操作
router.afterEach((to, from) => {
    const _title = to.meta.title
    if (_title) {
        window.document.title = _title
    }
})

// 导出默认值
export default router

再创建routes.js文件构建页面路由

const routes = [
  {
    path: '/',
    name: 'index',
    title: '首页',
    component: () => import('@/views/index.vue'), //.vue不能省略
  },
]
export default routes

在main.js中挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由
import router from './router/index'

createApp(App).use(router).mount('#app')

下载path插件不然引入的时候会报错

npm install path

在vite.config.js文件当中配置path让@指向src目录下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

至此项目配置完毕可以正常使用。