我们可以使用Vite创建一个原生项目,然后再安装Vue2的生态进行开发。 1.1、初始化项目 首先进入项目存放的地方,然后运行以下命令创建项目。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm init vite@latest 如果是首次使用Vite的话,会询问你是否继续,这里回复 y 即可。
1.4.3 src目录下创建App.vue文件 代码如下: <template> Hello Vite Vue2 </template> 1.5 运行一下项目 再次运行下项目检验一下之前配置有无问题 npm run dev 2、vue-router 2.1 安装 npm install vue-router@3.5.2 -S 2.2 新建router目录 2.2.1 创建路由表 在src目录下创建router目录,并在router目录下创...
npm install vue-router@4 2. vite.config.js(配置别名) import{defineConfig}from'vite' importvuefrom'@vitejs/plugin-vue' constpath=require('path') // element -plus 配置 按需导入-> 自动导入 importAutoImportfrom'unplugin-auto-import/vite' importComponentsfrom'unplugin-vue-components/vite' import...
importVuefrom'vue'importVueRouterfrom'vue-router'importHellofrom'../pages/Hello'Vue.use(VueRouter)constroutes=[{path:'/',component:Hello},{path:'/hello',component:Hello},]constrouter=newVueRouter({routes,})exportdefaultrouter src/main.js importVuefrom'vue'importAppfrom'./App.vue'importrouter...
1. 安装插件(一个vite必备,第二个是为了兼容vue2)npm i -D vite vite-plugin-vue2 2.将public中的index.html拉出来,放在最外层,与package.json同级 3.在index.html中引入 4.router中的index.js修改base 5.创建vite.config.js(没有则需要新建)
新建router文件夹创建index.ts // 引入创建路由管理器 引入创建路由模式history模式 import { createRouter, createWebHistory } from 'vue-router' import Home from "@/view/home.vue" // 使用别名@ // 引入路由各页面配置 const routes=[ { path: '/', ...
pnpm create vite vue-ts-app --template vue-ts 三、运行项目 安装插件:npm install 运行项目:npm run dev { "name": "vue-ts-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc && vite build", ...
两周前(202.02.17),vite2.0 发布了,作为使用了浏览器原生 ESM 为下一代前端工具,vite 2.0 相较于 1.0 更加成熟。在此之前笔者就开始关注这类「新型」的前端工具。这次趁着 vite 2.0 发布,也成功将一个基于 vue-cli(-service) + vue2 的已有项目进行了迁移。
npm init vite vite2x-vue3x-pinia-vueRouter --template vue 2、安装依赖 npm install 3、安装新一代状态管理器和路由 npm i pinia vue-router 4、main.js引入router和pinia。代码如下：import { createApp } from 'vue'import { createPinia } from "pinia"import router from './router'import App from...
涉及到的知识点:Vue3、Vite、TypeScript、ESlint、Stylelint、Vue-router、Axios、Pinia 本文项目初始化时间为2022/2/19,运行初始化命令获得的 vite 最新版本为 2.8.0 整个搭建过程体系因为我想把每个点都写得详细一点,所以内容会很多,全文主要分为两个部分: ...