vue3+vite 学习 创建项目

1. 创建项目 pnpm create vite my-vue-app – --template vue
2. 出现问题 将main.js 改为ts 会出现这个问题
   使用ts时候在路由页面 引入vue文件会出现 找不到模块的错

: 解决方法：
pnpm install -D vite-plugin-pages
pnpm install vue-router
在src下面创建env.d.ts文件

/// 

declare module '*.vue' {
	import { ComponentOptions } from 'vue'
	const componentOptions: ComponentOptions
	export default componentOptions
}
1
2
3
4
5
6
7

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()]
});


1
2
3
4
5
6
7
8

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` 全局声明
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10

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()]
   }),
 ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

配置.env.development 在页面访问

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

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

VITE_BASE_OS='https://192.168.1.12/'
1
2
3
4
5

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

{
  "compilerOptions": {
    "types": ["vite/client"] 
  },
}
1
2
3
4
5

3. 在src目录下env.d.ts文件中添加

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

interface ImportMeta {
  readonly env: ImportMetaEnv
}
1
2
3
4
5
6
7
8

4. 页面访问

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

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"],
}),
1
2
3
4