本文将带你从零开始,使用Vue3+Vite+Pinia+Router+ Axios 构建一个项目,并逐步封装通用组件,提升代码复用性和开发效率。 一、项目搭建 使用Vite 创建项目 npm create vite@latest my-vue-app --template vue cd my-vue-app npm install 安装必要依赖 npm install pinia vue-router axios 项目结构 my-vue-app/...
npm i vue-router 有时候我们需要从接口获取路由树结构,使用addRouter动态生成路由配置。 我们先创建一个静态文件,模拟接口返回的路由树结构。 新建文件src/router/config.ts // src/router/config.ts const routerList = [ { pageCode: 'home', pageName: '首页', pageType: 'page', }, { pageCode: 'm...
安装插件:pnpm add vue-router@4 在src目录下新建router文件夹,结构如下: index.ts是路由的根文件,modules下的文件是各个路由模块 import type { App } from 'vue' import type { RouteRecordRaw } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router' import remainingRouter fro...
启动你的Vite开发服务器:在终端中运行npm run dev(或yarn dev,取决于你使用的包管理器)。 打开浏览器并访问http://localhost:3000(或Vite显示的其他端口),你应该能看到由Vue Router渲染的页面。 通过以上步骤,你应该能够在Vite和Vue 3项目中成功安装并配置Vue Router。
vite+vue3中使用router 用vue3官方推荐的构建工具vite创建vue3项目的时候,项目中是没有像vue-cli一样可以默认引入路由的,这就很难受了,对于我这种习惯vue-cli配置好的人来说,有点不习惯。 下面我们就手动引入路由。 npm下载vue3对应的路由,注意的是vue3默认使用的是4.0+版本的路由,vue2中是不支持的,我们直接...
import * as VueRouter from 'vue-router'//1. 定义路由组件.//也可以从其他文件导入const Home = { template: 'Home1111'}//2. 定义一些路由//每个路由都需要映射到一个组件。//我们后面再讨论嵌套路由。const routes =[ { path:'/', component: Home }, { path:'/about...
1、npm create vite@latest ->输入项目名称->选择vue->选择ts->根据提示进行 2、安装vue-router,输入命令npm install vue-router@4 -s 3、安装element-plus,输入命令npm install element-plus -s 4、安装less,输入命令npm install less -s 5、安装icons,输入命令npm install @element-plus/icons-vue -s ...
Vue3 RC 后终于有时间玩玩,于是想把 vue/router/vite/状态管理整合在一起,写个练手项目试试开发体验。 首先初始化项目 $ npm init vite-app vite-example 完成后把依赖的版本号改成最新的。 Vite 比缺乏锻炼的中年男人更快! TSX 然后虽说使用vite 时不需要创建 tsconfig.json,但是由于我之前是在 monorepo ...
简介:Vue3+Vite+Js项目搭建之三:vue-router 路由构建 在router 文件夹下新建 index.js import { createRouter, createWebHistory } from "vue-router";import baseRouter from "./baseRouter";// 构建路由 函数const _createRouter = () =>createRouter({history: createWebHistory(),routes: baseRouter,scrol...
vite创建的vue3项目安装router和axios 文章目录 Vite 简介 创建项目 启动项目 打包项目 项目结构 `index.html` 与项目根目录 vue-cli和Vite区别 Vite的优势 使用CSS 引用静态CSS资源 CSS预处理器 使用sass 使用less 单文件组件 CSS 功能 组件作用域 CSS