// 1.进入项目cd vite-vue2// 2.安装依赖npm install// 3.启动项目npm run dev 效果图如下: 1.2 安装vite对vue2支持的插件 在vite-vue2安装:vite-plugin-vue2 // 注意:vite-plugin-vue2的版本为1.9.3npm install vite-plugin-vue2@1.9.3-D 在根目录创建vite.config.js文件,来注册插件 import{define...
使用Vite来搭建Vue 2项目的过程确实与直接使用Vue CLI有所不同,因为Vite官方主要支持Vue 3。然而,你仍然可以通过一些额外的步骤和插件来实现Vite对Vue 2的支持。以下是一个详细的步骤指南,帮助你使用Vite来搭建Vue 2项目: 1. 安装Node.js和npm 确保你的开发环境中已经安装了Node.js和npm。你可以通过运行node -...
1. 创建项目(三种方式) 1、pnpm pnpm create vite 2、npm npm init vite@latest 3、yarn yarn create vite 2. 在选择项目类型的时候选择vanilla 3. 安装 vite 对 vue2 支持的插件 pnpm install vite-plugin-vue2 4. 要使用 vite 插件,需要在项目的根目录创建 vite.config.js 文件 import{ defineConfig }...
// 1.进入项目cd vite-vue2// 2.安装依赖npm install// 3.启动项目npm run dev 1.2 安装vite对vue2支持的插件 在vite-vue2安装:vite-plugin-vue2 // 注意:vite-plugin-vue2的版本为1.9.3npm install vite-plugin-vue2@1.9.3-D 在根目录创建vite.config.js文件,来注册插件 import{ defineConfig }from...
使用Vite创建出来的Vue项目,暂时都是Vue3的。 Vite是构建工具的高阶封装。它的内部其实是Rollup。 Vite是尤雨溪随着Vue3正式版 一起发布的一个工具。 最开始Vite是为Vue3服务的一个工具,但随着Vite 2.0发布之后,Vite就是一个独立的构建工具了。 Vite除了能搭建Vue3项目之外,还能搭建react等项目。
（1）、在项目的根目录下新建vite.config.js 文件，代码如下：import { defineConfig } from 'vite' import path from 'path' import {createVuePlugin} from 'vite-plugin-vue2' import legacyPlugin from '@vitejs/plugin-legacy' //按需导入组件 start import Components from 'unplugin-vue-components/vite...
使用Vite创建出来的Vue项目,暂时都是Vue3的。 Vite是构建工具的高阶封装。它的内部其实是Rollup。 Vite是尤雨溪随着Vue3正式版 一起发布的一个工具。 最开始Vite是为Vue3服务的一个工具,但随着Vite 2.0发布之后,Vite就是一个独立的构建工具了。 Vite除了能搭建Vue3项目之外,还能搭建react等项目。
(2)、cd 项目目录名 (3)、npm i 2、安装依赖包/插件 (1)、包:vue@2.6.14,vue2最高版本,生产依赖。通过终端输入:npm view vue versions 命令查询,地址:https://cn.vuejs.org/v2/guide/ (2)、包:vue-router@3.5.3,vue-router3最高版本,兼容vue2.x,生产依赖。通过终端输入:npm view vue-router ve...
1.创建vite2项目 命令行中键入以下内容: npm init vite@latest 开始选择模板: 选择模板 这里我们选择vue,给项目命名后选择vue就可以创建完成了,可以看到这是项目结构: 项目结构 然后我们在命令行输入 npm i 安装依赖,再输入npm run dev启动项目,发现启动成功!
备注:关于vue3语法、pinia使用等编程知识不会在这里细述了,大家可以到网上检索或者直接在项目里面寻找。 1. 技术栈 编程:Vue3.x+Typescript 构建工具:Vite 路由| 状态管理:vue-router+Pinia UI Element:nutui 2. 工程结构 . ├── README.md ├── index.html 项目入口 ...