vite创建vue3项目

本文介绍了如何使用Vite创建Vue3项目,从安装到启动,再到设置路由和配置文件,详细讲解了每个步骤,包括选择框架、安装依赖、创建路由文件,并提到了在Vite配置中解决引用路径问题的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.安装 参考:https://vitejs.cn/guide/#scaffolding-your-first-vite-project

npm init @vitejs/app <项目名称>

二.选择框架vue ==>js or ts

三.进入项目,启动项目

npm run dev

四.安装依赖

npm install    或者   cnpm install

五.创建路由文件

  1. 下载安装

    npm install vue-router@4 -S
    
  2. src文件夹下新建router文件夹,文件夹下新建index.js

import { createRouter,createWebHistory } from "vue-router";

const routes = [
  {
      path: '/',
      name: 'index',
      component: () => import('@/views/Index.vue')
  },
  {
      path: '/home',
      name: 'home',
      component: () => import('@/views/Home.vue')
  },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router;
  1. src文件夹下新建views文件夹,文件夹下新建Index.vue,Home.vue文件

  2. main.js挂载

    import { createApp  } from 'vue'
    import App fromm './App.vue'
    
    import router from './router/index.js'
    
    createApp(App).use(router).mount('#app')
    
     或者
    
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

const app = createApp(App)
app.use(router)
app.mount('#app')
  1. app.vue
<template>
<router-view />
</template>
  1. 其他配置: vite.config.js

    直接写文件路径’@/views/Home.vue’页面是会报错的,需要配置vite.config.js文件如下才能使用@,并且Home.vue要写全.vue不能省略:.js文件可以省略.js

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from "path";
    
    // https://vitejs.dev/config/
    export default defineConfig({
      // 插件配置
      plugins: [vue()],
      //设置的别名 
      resolve: {
        // 如果报错__dirname找不到,需要安装node,
        // 执行npm i @types/node --save-dev
        alias: {
          '@': path.resolve(__dirname, "./src"),
          "@assets": path.resolve(__dirname, "./src/assets"),
          "@common": path.resolve(__dirname, "./src/common"),
          "@utils": path.resolve(__dirname, "./src/utils"),
          "@components": path.resolve(__dirname, "./src/components"),
          "@views": path.resolve(__dirname, "./src/views"),
          "@styles": path.resolve(__dirname, "./src/styles"),
        },
      },
        // 服务配置
      server:{    
        port:3000,// 端口号    
        open:true,// 自动在浏览器打开    
        https:false,// 是否开启 https
      },
      // css 处理
      css:{
        preprocessorOptions: {
                scss: {
                    /* .scss全局预定义变量,引入多个文件 以;(分号分割)*/
                    additionalData: `@import "./src/styles/css/global.scss";`,
                },
            },
      },
      //  生产环境
      build: {
        //指定输出路径
        assetsDir: "./",
        // 指定输出文件路径
        outDir: "dist",
        // 代码压缩配置
        terserOptions: {
          // 生产环境移除console
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
        },
      },
    });
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值