vue3+vite 学习创建项目

_大菜鸟_

已于 2024-10-09 10:57:51 修改

阅读量373

点赞数

文章标签：学习 vue.js javascript

于 2022-08-18 14:47:39 首次发布

本文链接：https://blog.csdn.net/weixin_46463643/article/details/126386995

版权

本文介绍了如何使用Vite创建Vue3项目，包括解决将main.js转换为ts时遇到的问题，设置别名，安装并配置unplugin-auto-import以避免引入ref等，集成Element Plus，设置环境变量，以及利用vite-plugin-pages实现目录结构即路由的自动配置。此外，还提到了安装Sass和处理找不到模块的错误的方法。

摘要由CSDN通过智能技术生成

创建项目 pnpm create vite my-vue-app – --template vue
yarn 创建项目 yarn create vite my-vue-app --template vue
如遇启动项目问题

在这里插入图片描述
解决方法：
–1. host已配置
127.0.0.1 localhost
–2.

 export default defineConfig({
  server: {
    host: "127.0.0.1",
  }
})

build 打包之后 index.html文件报错
解决方法：

 export default defineConfig({
   // 设置打包路径
   base: "./",
})

出现问题将main.js 改为ts 会出现这个问题
使用ts时候在路由页面引入vue文件会出现找不到模块的错

在这里插入图片描述 : 解决方法：
pnpm install -D vite-plugin-pages
pnpm install vue-router
在src下面创建env.d.ts文件

/// <reference types="vite-plugin-pages/client" />

declare module '*.vue' {
	import { ComponentOptions } from 'vue'
	const componentOptions: ComponentOptions
	export default componentOptions
}

vite.config.ts
在这里插入图片描述

添加别名，配置~指向src

在这里插入图片描述
解决方法：pnpm install @types/node --save-dev

按需加载 pnpm i unplugin-vue-components -D

// vite.config.js
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [Components()]
});

pnpm i -D unplugin-auto-import 不用引入ref等

// vite.config.js
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    }),
  ],
});

css 安装sass

pnpm install -D sass

安装 element-plus

pnpm install element-plus

// vite.config.js
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
 plugins: [
   Components(
     {
       resolvers:[ElementPlusResolver()]
     }
   ),
   AutoImport({
     resolvers: [ElementPlusResolver()]
   }),
 ],
});

配置.env.development 在页面访问

新建.env.development文件和package.json同级

ENV = 'development'
 
VITE_BASE_API='https://192.168.1.12/'

VITE_BASE_OS='https://192.168.1.12/'

在package.json同级新建tsconfig.json文件

{
  "compilerOptions": {
    "types": ["vite/client"] 
  },
}

interface ImportMetaEnv {
	readonly VITE_BASE_API: string
    readonly VITE_BASE_OS: string
} 

interface ImportMeta {
  readonly env: ImportMetaEnv
}

页面访问

 console.log("ENV", import.meta.env); //获取环境变量

vite-plugin-pages

目录结构即路由

eg:
src/pages/index.vue => /
src/pages/about.vue => /about
src/pages/menus/index => /menus
src/pages/menus/one => /menus/one
src/pages/[…notFound].vue => 404 路由
在上面的基础上将vite.config.ts中pages修改

 // 文件路由
Pages({
  extensions: ["vue", "md", "tsx"],
}),

当访问页面不存在时

router.ts配置 放在最下
 {
    component: () => import("@/pages/notFound.vue"),
    path: "/:pathMatch(.*)",
  },