出现这个现象的原因是:Vue所有组件的统一入口是App.vue,其它组件都是在这个组件内渲染的。如果我们将非登录页面的布局写在App.vue里,就会出现上面的情况。 方案一:单一 <router-view/> 方式 这个方法是让App.vue内容只有一个 <roter-view/> 组件,这样最灵活,然后再配置路由,将登录组件与非登录组件分成两组路由。
出现这个现象的原因是:Vue所有组件的统一入口是App.vue,其它组件都是在这个组件内渲染的。如果我们将非登录页面的布局写在App.vue里,就会出现上面的情况。 方案一:单一 <router-view/> 方式 这个方法是让App.vue内容只有一个 <roter-view/> 组件,这样最灵活,然后再配置路由,将登录组件与非登录组件分成两组路由。
module.exports={printWidth:100,tabWidth:2,useTabs:false,semi:false,// 未尾逗号vueIndentScriptAndStyle:true,singleQuote:true,// 单引号quoteProps:'as-needed',bracketSpacing:true,trailingComma:'none',// 未尾分号jsxBracketSameLine:false,jsxSingleQuote:false,arrowParens:'always',insertPragma:false,requ...
1、 element-plus 安装命令: npm install element-plus --save 2、vue-router 安装命令: npm install vue-router --save 安装完成后,需要到main.ts注册: import{createApp}from'vue' importAppfrom'./App.vue' importElementPlusfrom'element-plus' import'element-plus/dist/index.css' importrouterfrom'./ro...
第一步 创建vue3项目 首先你已经安装好了node.js,这些就不用多说了 如果你没有更换过镜像源,先来更换镜像源 npm config set registry=https://registry.npmmirror.com 然后来创建vite + vue3项目 # 这个命令 只能选择 框架 和 语言,其他模块需要手动安装和并配置 ...
基于Vue3+Vite+TS二次封装element-plus 在Hive 这一块,动态化模块分三层,就是库、接口,再往上就是组件,再往上就应用,那应用其实就是力度最大的模块了,那它会带自身的一个路由系统,区别就在这里,它会有多个页面。然后这个下面我们会继续说应用层级的划分。那在这种模式下,我们可以先考...
使用create-vite 命令创建一个新项目,可以选择 Vue3 作为默认框架。运行以下命令: create-vite my-vue-app --template vue 3. 安装 Element Plus 进入项目目录,安装 Element Plus: cd my-vue-app npm install element-plus 4. 配置项目 在项目根目录下,创建一个名为 `src` 的文件夹。将 `src` 文件夹下...
import{ref}from"vue";constlocale=ref(zhCn);constchangeLanguage=(language:any)=>{locale.value=language;}; 这样我们在点击中文,英文按钮的时候,就会发现element-plus的组件文字就可以相互切换了(element-plus支持的语言列表) 网站中自己的文本 网页中我们自己的文字要做语言的切换的话就需要依赖vue的一个插件了...
npm install -D unplugin-vue-components unplugin-auto-import (2)把下列代码插入到 vite.config.ts 配置文件中，注意插入的位置和标点符号 import { defineConfig } from 'vite'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlus...
安装Vue3+ts+vite npm init vite@latest 1. 选择y,新建项目名称,选择vue,选择vue-ts 下载完成后执行以下命令行 cd 新建的项目名称 npm i npm run dev 1. 2. 3. 安装Element-Plus npm install element-plus --save 1. 安装完后给main.ts配置以下代码 ...