一.安装 参考:https://vitejs.cn/guide/#scaffolding-your-first-vite-project
npm init @vitejs/app <项目名称>
二.选择框架vue ==>js or ts
三.进入项目,启动项目
npm run dev
四.安装依赖
npm install 或者 cnpm install
五.创建路由文件
-
下载安装
npm install vue-router@4 -S
-
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;
-
src文件夹下新建views文件夹,文件夹下新建Index.vue,Home.vue文件
-
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')
- app.vue
<template>
<router-view />
</template>
-
其他配置: 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, }, }, }, });