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://协议访问。通过查找相关资料实现逻辑主要...
一、 使用Vite创建Vue3项目 1.全局安装vite，使用命令npm install vite -g 2.创建vue3项目，使用命令 npm create vite@latest ,确认项目名 称，选择Vue及TypeScript 3. 使用用vscode打开项目，运行命令 npm install npm run dev 4.整个项目目录结构如下：5.访问页面 二、将打包项目发布到Nginx 1.将打包后...
1. 创建工程 使用vite创建, 选择vue pnpm create vite 2. 项目结构 image.png 3. 编写代码 核心是main.js, 组件就用默认的HelloWorld.vue import{createApp}from'vue'importAppfrom'./components/HelloWorld.vue'functionrenderVueComponentToDOM(domElement){createApp(App).mount(domElement)}exportdefaultrenderVue...
vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。 vite 的库项目可以分为两类:(我自己分的) 一个是纯js的项目,不带HTML; 一个是可以带上HTML(模板)的项目,比如UI库。 下面...
1.你需要有一个完整的 vue项目 2.注意查看自己的接口地址用不用切换 3.需要你 npm run build 先打包一遍生成 dist 4.在 dist 1.在项目里面 会有index.html 所以不用自己生成 2.pageage.json (也别自己建 看下文) 3.只需要建main.js 文件配置 ...
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; ...
创建一个新的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 命令，用于将打包模式...