4.输入命令: yarn create vite my-vue-app --template vue 5.安装vite成功后,输入: cd my-vue-app yarn 安装vue 6.成功后, 输入: yarn dev 服务端启动vue 7.ctrl+鼠标点击打开项目地址:http://localhost:5173/ 8.可以使用: yarn run build 对项目进行打包 9.打包完的文件在dist目录下,注意: 1.有跨...
vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要...
1 全局安装vite，使用命令 npm install vite -g，如下图所示：2 创建vue3项目，使用命令 npm create vite@latest ,确认项目名称，选择Vue及TypeScript，如下图所示：3 使用vscode打开项目，依次运行命令 npm install npm run dev，如下图所示：4 整个项目目录结构，如下图所示：5 访问页面，如下图所示...
在命令行中执行以下命令,使用Vite打包Vue库: npm run build 这将根据vite.config.js中的配置,将Vue库打包为一个或多个JavaScript文件。打包后的文件将存储在dist目录下。 6. 使用Vue库 现在,你可以在浏览器或其他JavaScript环境中使用打包后的Vue库了。只需将dist目录下的JavaScript文件引入到你的项目中,即可使用V...
1.创建vue项目 npm create vite@latest vue3-plugin-test 2.在src 目录下创建plugins/Button.vue <template><!-- 自定义插槽 --><slot></slot></template>export default { //一定要写组件名 name: "vue-button", };.btn { display: inline-block; ...
第一次打包vue的项目部署到tomcat服务器下时,发现初次加载特别的缓慢,将近20s页面才加载出来,完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。
vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。 vite 的库项目可以分为两类:(我自己分的) 一个是纯js的项目,不带HTML; 一个是可以带上HTML(模板)的项目,比如UI库。 下面...
创建一个新的Vite项目: mkdir my-vite-app cd my-vite-app npm init vite 1. 2. 3. 3.根据需要选择框架(如React、Vue.js等)和模板(如JavaScript、TypeScript等)。 在项目的根目录中创建一个vite.config.js文件,并配置您的项目: // vite.config.js ...
配置模式 所以我们可以在项目根目录添加一个.env.testing文件，然后配置一条 test 命令，用于将打包模式...