五、服务器配置: 打开vite.config.ts文件,添加server代码,让本地所有ip都可以访问: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server:{ host:'0.0.0.0', port:9999, open:true } ...
3.在vite.config.ts中引入 <!-- vite.config.ts代码结束 -->import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'// 下面这三行是引入组件importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components...
'src')constPORT=5173;// https://vitejs.dev/config/exportdefault({mode})=>{letBASE="/"if(mode==="production"){// 可以执行一些不同的配置,比如: BASE = "/public"}returndefineConfig({base:BASE,server:{port:PORT},resolve:{alias:{'~/':`${pathSrc}/...
如果你觉得前面的手动引入比较麻烦,Varlet也支持自动引入,这个实现依赖的是unplugin-vue-components插件,这个插件会扫描所有声明在模板中的组件,然后自动引入组件逻辑和样式文件并注册组件。 在Vite中的配置方式: import vue from '@vitejs/plugin-vue' import components from 'unplugin-vue-components/vite' import {...
之后我们在vite.config.ts中进行配置,这里既然进行自动引入了,顺便把vue的组件也自动引入了,大家应该知道vue3的组合式API(也是本文采用的方式)中无论是ref还是生命周期函数之类的,都需要在使用时进行手动引入,这里我们把vue的组件也还有vue-router自动引入了,后期用的时候就无需再手动引入了。
确保你的电脑已经安装了 Node.js(建议使用最新稳定版 LTS),然后安装 Vite CLI。在命令行中运行以下命令: npm install -g create-vite 2. 创建新项目 使用create-vite 命令创建一个新项目,可以选择 Vue3 作为默认框架。运行以下命令: create-vite my-vue-app --template vue ...
Vue3-Vite项目中使用element-plus,按需导入element-plus组件和el-icon,以及自动导入Vue相关函数。 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。配置也更加简单,可以直接参考element-plus的官网。 安装依赖 npm i element-plus @element-plus/icons-vue ...
首先我们使用vite来初始化项目,vite支持使用npm、yarn和pnpm来初始化项目,本文采用yarn的方式。 代码语言:javascript 复制 // 使用npmnpm create vite@latest// 使用yarnyarn create vite// 使用pnpmpnpm create vite 输入命令之后会提示我们输入项目名,如果我们已经建好项目,并且是在项目根目录执行的命令的话,只需输...
vite按需加载element-plus,减少项目体积,你必须学会 1.在项目中安装 $ npm install element-plus --save $ yarn add element-plus $ pnpm install element-plus 1. 2. 3. 4. 5. 2.安装对应的插件 npm install -D unplugin-vue-components unplugin-auto-import...
1.创建一个vite项目 或者 2.安装element-plus 为了方便,直接采取全部引入的方式 新建:src/plugins/element.ts 在main.js