您的当前位置:首页使用vue-cli+element-ui快速搭建项目了解一下
广告

使用vue-cli+element-ui快速搭建项目了解一下

2023-11-29 来源:酷申汽车网

在vue专题中可以看到各个ui框架的受欢迎程度

20180131160504334.png

二、代码操作

使用vue-cli + element-ui有两种方式

方案一: ①先使用vue-cli 搭建好项目, ②再使用npm install对应的模块、插件, ③再去webpack.conf.js中进行配置各种文件的加载器, ④再去.babelrc 中配置插件

如果项目还没开始编写,就不要使用方案一了,如果项目已经启动了一阵子了,那就得按以上要点每一步都得处理好,稍有不慎,就报错了,这里介绍一下方案二,就是使用 element-ui 提供的一个模板

方案二: ① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板 (本地电脑没有安装 git 的可以进入 https://github.com/ElementUI/element-starter ,点击绿色的 Clone or download 按钮,点击 Download ZIP 下载模板) ② 在项目根目录下使用cnpm intsall下载依赖的模块(没有淘宝镜像 cnpm 可以使用npm install) ③ 在项目根目录下使用npm run dev跑项目

模板的基本架构如下——和使用vue-cli 脚手架搭建的项目基本没有区别,十分干净

20180131162700904.png

项目跑起来后可以看到一个简单的页面——就比使用vue-cli搭建的项目的页面多了一个element-ui按钮组件

20180131162913158.png

接下来就可以使用element-ui库了~

ElementUI 的简单应用,可以如如下的文章,点击链接进入

使用 vue2.0 快速搭建一个后台 增删改查 管理界面

三、其他install 参数

1、写入dependencies

npm install module_name -S
npm install module_name --save

2、写入devDependencies

npm install module_name -D
npm install module_name --save-dev

3、全局安装(命令行使用)

npm install module_name -g

小编还为您整理了以下内容,可能对您也有帮助:

怎样使用vue-cli快速搭建项目

这次给大家带来怎样使用vue-cli快速搭建项目,使用vue-cli快速搭建项目的注意事项有哪些,下面就是实战案例,一起来看一下。

1. 避坑前言

其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错:

创建vue-cli工程项目时的报错

在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。相关答疑帖:https://github.com/vuejs/vue-cli/issues/618

确认node与npm的版本

将这个放在最前面说是希望大家在搭建前,应该先确保将node更新至6以上,这样能少走一些弯路。下面开始正式介绍整个构建过程。

2. 使用 vue-cli 搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:

npm install cnpm -g --registry=https://registry.npm.taobao.org其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

(1)全局安装 vue-cli ,在命令提示窗口执行:

cnpm install -g vue-cli

安装vue-cli

出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。

(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

vue init webpack

创建vue-cli工程项目

确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录:

生成文件目录

(3)生成文件目录后,使用 cnpm 安装依赖:

cnpm install

安装依赖

(4)最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:

启动项目

启动项目

默认网页

到这一步,就算成功利用vue-cli搭建一个vue项目了,撒花 ~

3.目录结构及其对应作用

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

├── build/ # webpack 编译任务配置文件: 开发环境与生产环境

│ └── ...

├── config/

│ ├── index.js # 项目核心配置

│ └── ...

├ ── node_mole/ #项目中安装的依赖模块

── src/

│ ├── main.js # 程序入口文件

│ ├── App.vue # 程序入口vue组件

│ ├── components/ # 组件

│ │ └── ...

│ └── assets/ # 资源文件夹,一般放一些静态资源文件

│ └── ...

├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)

├── test/

│ └── unit/ # 单元测试

│ │ ├── specs/ # 测试规范

│ │ ├── index.js # 测试入口文件

│ │ └── karma.conf.js # 测试运行配置文件

│ └── e2e/ # 端到端测试

│ │ ├── specs/ # 测试规范

│ │ ├── custom-assertions/ # 端到端测试自定义断言

│ │ ├── runner.js # 运行测试的脚本

│ │ └── nightwatch.conf.js # 运行测试的配置文件

├── .babelrc # babel 配置文件

├── .editorconfig # 编辑配置文件

├── .gitignore # 用来过滤一些版本控制的文件,比如node_moles文件夹

├── index.html # index.html 入口模板文件

└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息

└── README.md #介绍自己这个项目的,可参照github上star多的项目。

build/相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS实现最简单的查找、排序、去重算法

如何使用jQuery实现获取随机颜色

使用vue-cli(vue脚手架)快速搭建项目

下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:(淘宝镜像命令)

其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

(1)全局安装 vue-cli ,在命令提示窗口执行:

(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:

通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

vue引入element_plus怎么快速进行工程改造

1、首先vue引入elementplus快速进行工程改造将基本最新的vuecli去创建。
2、其次开控制台到到所在的根目录。
3、最后引入并注册全部组件,即可在页面中直接改造。

vue引入element_plus怎么快速进行工程改造

1、首先vue引入elementplus快速进行工程改造将基本最新的vuecli去创建。
2、其次开控制台到到所在的根目录。
3、最后引入并注册全部组件,即可在页面中直接改造。

Vue3+elemetPlus支持动态路由和菜单管理UI框架

内容较多请耐心阅读,你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架,总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能,实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

1、unituicli3是一个基于vue3搭建的一个项目,它是 与时俱进 的, 极具时代性,紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库,除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库, 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器,我们为了帮助你实现可视化管理动态路由和菜单,我们内置了《组件管理》功能组件,使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理,在vue2版本的基础上新增了可选json导出功能,让你可以快速实现json数据生成,生成用户权限路由和菜单。

4、美丽的视图框架,我们 内置了一个后台管理UI框架 ,你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净,将项目控制权更多的交给开发者,我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分,为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空,重新搭建你的组件,因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大,因为这是 核心组件 ,将动态路由(添加、删除、修改)、嵌套路由和菜单管理(添加、删除、修改)变得可视化,而且支持json数据生成使前后端间交互变得可能,你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响,但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from './App.vue'

import router from './router'

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

const app = createApp(App)

app.use(ElementPlus)

app.use(router).mount('#app')

// 注册全局组件

import Uicon from './unitui/sub/Uicon.vue'

app.component('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器,你可以在任意组件通过 使用图标选择器,它挂载在main.js文件中,你如不是使用element你需要做出修改,否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件,它主要用于模拟登录时的操作和信息生成,它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息,json内容模拟后端返回的内容。

其中最重要的是路由的生成,你在登录后路由json信息返回后调用init_route方法,代码如下:

init_route(route_data) {

//依据后端返回的json数据生成路由

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () => import(`@/${route_data[index].children[i].component}`),

// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃,所以需要循环使用addRoute进行数组添加

this.$router.addRoute(init_route_data[index]); //循环添加数组

}

this.init_menu(); //执行菜单生成方法

},

其他三个你可以随意修改

在vue2动态路由项目之中,在app.vue文件mounted方法中调用路由生成方法,可以实现刷新路由防丢失,但是在vue3中采用同样方式,则会出现异常,原因是我们跳转发生在路由添加前,所以会出现刷新后页面没有内容,所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容,然后再main.js中引入。

init_route.js内容:

import router from '@/router'

function init_route() {

//依据后端返回的json数据生成路由

if (sessionStorage.getItem("route_data") != null) {

const route_data = JSON.parse(sessionStorage.getItem("route_data"));

// console.log(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () =>

import(`@/${route_data[index].children[i].component}`),

// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃,所以需要循环使用addRoute进行数组添加

router.addRoute(init_route_data[index]); //循环添加数组

}

// 这里放置刷新

// console.log('app');

// const index=window.location.href.lastIndexOf("#")

// const url=window.location.href.substring(index+1,window.location.href.length);

// this.$router.push(url)

}

}

init_route()

在main.js中引用:

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

此时便可完成刷新自动初始化

我们通过在app.vue文件中通过获取路由中meta. show_site的值(0全屏显示,1显示在视图内),然后使用 v-if控制不同router-view的显示来实现显示位置的控制。

App.vue源码:

1、如果你不喜欢我们的ui框架,你需要开发新的ui时,没有ui框架的支持《组件管理》功能可能不能正常显示(显示空白),你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为:

#sub_admin_back {

width: 100%;

/* 非ui框架将height写为height: 100vh; */

height: 100vh;

background-size: cover;

position: relative;

background-color: #ffffff;

border-radius: 10px;

}

1、没能尽可能减少对框架的干扰,你仍然需要保持对main.js的适当修改。

Vue3+elemetPlus支持动态路由和菜单管理UI框架

内容较多请耐心阅读,你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架,总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能,实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

1、unituicli3是一个基于vue3搭建的一个项目,它是 与时俱进 的, 极具时代性,紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库,除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库, 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器,我们为了帮助你实现可视化管理动态路由和菜单,我们内置了《组件管理》功能组件,使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理,在vue2版本的基础上新增了可选json导出功能,让你可以快速实现json数据生成,生成用户权限路由和菜单。

4、美丽的视图框架,我们 内置了一个后台管理UI框架 ,你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净,将项目控制权更多的交给开发者,我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分,为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空,重新搭建你的组件,因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大,因为这是 核心组件 ,将动态路由(添加、删除、修改)、嵌套路由和菜单管理(添加、删除、修改)变得可视化,而且支持json数据生成使前后端间交互变得可能,你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响,但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from './App.vue'

import router from './router'

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

const app = createApp(App)

app.use(ElementPlus)

app.use(router).mount('#app')

// 注册全局组件

import Uicon from './unitui/sub/Uicon.vue'

app.component('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器,你可以在任意组件通过 使用图标选择器,它挂载在main.js文件中,你如不是使用element你需要做出修改,否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件,它主要用于模拟登录时的操作和信息生成,它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息,json内容模拟后端返回的内容。

其中最重要的是路由的生成,你在登录后路由json信息返回后调用init_route方法,代码如下:

init_route(route_data) {

//依据后端返回的json数据生成路由

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () => import(`@/${route_data[index].children[i].component}`),

// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃,所以需要循环使用addRoute进行数组添加

this.$router.addRoute(init_route_data[index]); //循环添加数组

}

this.init_menu(); //执行菜单生成方法

},

其他三个你可以随意修改

在vue2动态路由项目之中,在app.vue文件mounted方法中调用路由生成方法,可以实现刷新路由防丢失,但是在vue3中采用同样方式,则会出现异常,原因是我们跳转发生在路由添加前,所以会出现刷新后页面没有内容,所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容,然后再main.js中引入。

init_route.js内容:

import router from '@/router'

function init_route() {

//依据后端返回的json数据生成路由

if (sessionStorage.getItem("route_data") != null) {

const route_data = JSON.parse(sessionStorage.getItem("route_data"));

// console.log(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component: (resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () =>

import(`@/${route_data[index].children[i].component}`),

// component:(resolve) => require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () => import(`@/${route_data[index].component}`),

// component:(resolve) => require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_data.length; index++) {

//由于addRoutes已经废弃,所以需要循环使用addRoute进行数组添加

router.addRoute(init_route_data[index]); //循环添加数组

}

// 这里放置刷新

// console.log('app');

// const index=window.location.href.lastIndexOf("#")

// const url=window.location.href.substring(index+1,window.location.href.length);

// this.$router.push(url)

}

}

init_route()

在main.js中引用:

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

此时便可完成刷新自动初始化

我们通过在app.vue文件中通过获取路由中meta. show_site的值(0全屏显示,1显示在视图内),然后使用 v-if控制不同router-view的显示来实现显示位置的控制。

App.vue源码:

1、如果你不喜欢我们的ui框架,你需要开发新的ui时,没有ui框架的支持《组件管理》功能可能不能正常显示(显示空白),你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为:

#sub_admin_back {

width: 100%;

/* 非ui框架将height写为height: 100vh; */

height: 100vh;

background-size: cover;

position: relative;

background-color: #ffffff;

border-radius: 10px;

}

1、没能尽可能减少对框架的干扰,你仍然需要保持对main.js的适当修改。

vue+ElementUI

排查发现是 "sass-loader": "^11.0.1", 版本过高导致,因此需要降低版本

解决方式

降低版本至: "sass-loader": "^7.3.1",

然后重新安装依赖 npm install

嵌套路由,又称子路由,在实际应用中,通常用多层嵌套的组件组合而成。

父路由在跳转的内容下的部分,再进行跳转

父路由用来控制,首页和登录页两个组件的跳转

子路由在父路由跳转的内容下,控制子组件的跳转。

方式一:

name 传递的是地址(或者组件名),通过 params 向== 路由中 ==传递参数。

注意,参数传递时,vue需要一个对象,绑定一个参数值 v-vind:

方式二:

注:传递参数时需要在路由中给组件命名,并以名字作为模板中的属性

如此便成功设置重定向

路由模式有两种:

修改如下:

如此,便不带#号了

至此,404配置成功

beforeRouterEnter :在进入路由之前执行

beforeRouterLeave :在离开路由前执行

to 相当于request, from 相当于response, next 相当于chain:从哪里来,到哪里去,是否继续往下走。

参数详解:

基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

Hello 大家好,这里是Anyin。

最近打算把一个小型项目(小程序点餐系统)重构为微服务+微应用模式,前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。

重构后的项目相关地址:

•后端: Anyin Cloud [1]

•前端基座: Anyin Cloud Parent[2]

•前端微应用: Anyin Cloud Base[3]

好了,接下来,我们来看看如何基于 Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。

另外说下,这里为什么不用 Vite 进行构建,原因是 Vite 目前结合 Qiankun 构建为应用还有点问题(采坑了),所以这里就放弃了。

首先,我们使用 vue-cli 创建一个parent项目:

接着,手动选择我们要添加的组件:

我们选择以下组件进行应用的构建,使用空格键进行多选,然后回车即可:

选择vue3.x版本

相关代码风格、路由模式都是使用默认,css编译我们使用less:

相关编码规范我们使用ESLint + Airbnb Config :

最后,完整的选项如下:

当vue-cli帮我们创建好项目,我们进入项目查看下项目目录,如下:

首先,Qiankun的主应用是需要安装依赖的,微应用无需安装依赖,修改配置即可。这里我们先在主应用安装依赖

接着,进行相关微应用配置。我们新增一个 app.ts ,用于记录所有的微应用的入口:

然后,注册微应用,并导出start方法

导出 start 方法之后,需要在入口处执行该方法

对于整个界面,我们希望整体的布局是这个样子的:

所以,我们在安装 ElementPlus 之后,需要做这样子的布局。

首先,安装 ElementPlus

接着,在 main.ts 引入 ElementPlus 组件,如下:

然后,创建一个布局组件 Layout.vue ,如下:

最后,在App.vue注册该组件

运行起来呈现的效果如下:

微应用的初始化项目同主应用,这里就不详细说明。

微应用无需依赖 Qiankun ,这里我们做一些配置即可。

在 src 目录下新增一个 public-path.js 文件,内容如下:

在 main.ts 引入该文件

新增一个路由配置文件,这里我们创建对应的路由信息,并且兼容运行,内容如下:

接着,修改 main.ts 关于实例化的代码,如下:

这里主要是定义个渲染的方法,然后暴露Vue实例,因为等下在微应用的生命周期的钩子会使用到。

对于微应用还需要暴露生命周期的钩子方法,这样子主应用才能够识别,在 main.ts 添加如下方法:

使用 vue 创建项目是没有 vue.config.js 文件的,这里我们手动创建一个,并且配置相关详细,代码如下:

•这里我们导入了 package.json 的 name 字段,因为这里需要和主应用配置的 app.ts 文件的 name 字段一致 • headers 添加跨域配置,因为主应用是通过 fetch 方法来获取微应用的资源的,而微应用是启动在另外一个端口,所以需要添加跨域配置 • output 配置了微应用的打包格式,主应用才能正确识别微应用的一些配置

还记得我们以下这个图不?

我认为 Header 应该是属于主应用,而下面的 Aside 和 Main 都是属于微应用, Aside 块一般都是用于展示菜单,个人认为各个微应用应该各自维护自己的菜单,而不是交由主应用维护。

所以,在微应用,我们还需要处理下左侧的菜单布局。

我们新增一个 Layout.vue 布局文件

至此,Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成,整体运行看下效果:

首页

微应用

好了,基于 Vue3+TS+ElementPlus+Qiankun 的微应用项目基本框架我们已经搭建好了,后续就是慢慢填充一些工具和页面了。

相关源码地址:

•主应用: Anyin Cloud Parent

•微应用: Anyin Cloud Base

[1] Anyin Cloud : https://gitee.com/anyin/anyin-cloud

[2] Anyin Cloud Parent: https://gitee.com/anyin/anyin-cloud-parent

[3] Anyin Cloud Base: https://gitee.com/anyin/anyin-cloud-base

酷申汽车网还为您提供以下相关内容希望对您有帮助:

怎样使用vue-cli快速搭建项目

(1)全局安装 vue-cli ,在命令提示窗口执行:cnpm install -g vue-cli安装vue-cli出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,...

使用bootstrapVue、element-ui搭建vue环境

1、检查npm版本,升级版本 2、创建vue项目 1、打开vue项目中index.html,修改Responsive meta tag 2、运行命令安装bootstrap-vue 3、app.js文件添加引用 4、可以直接引用组件 1、安装element-ui 2、main.js中引入引用 3、...

使用vue-cli(vue脚手架)快速搭建项目

(1)全局安装 vue-cli ,在命令提示窗口执行:(2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文...

vue项目创建和部署使用

这里说下 vue-cli 脚手架所带的图形界面编译打包管理,可使用如下命令开启,然后按照提示,加入需要的项目,可以查看仪表盘展示,进行插件管理,依赖管理,编译配置,以及项目构建的操作,十分方便。启动 vue-cli 图形界面 然后...

Element-UI 的基本使用(基于 Vue 的 组件库)

① 运行 vue ui 命令,打开图形化界面 ② 通过 Vue 项目管理器 ,进入具体的项目配置面板 ③ 点击 插件 -&gt; 添加插件 ,进入插件查询面板 ④ 搜索 vue-cli-plugin-element 并安装 ⑤ 配置插件,实现按需导入,...

vuecli如何使用

使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的...

Element UI 基本使用

2.1完整引入 在 main.js 中写入以下内容:import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui';//全局引入 import 'element-ui/lib/theme-chalk/index.css';Vue.config....

vue+ element- ui好用吗?

安装 &amp; 引入:支持 npm 方式和 cdn 方式,并支持按需引入。工程化:开发,测试,构建,部署,持续集成。作为一个基础组件库,还有一个很重要的方面就是组件种类丰富。element-ui官方目前有55个组件,分成了6大类,分别是...

vue脚手架是什么

vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。Vue是一个用于构建用户界面的渐进式框架。它是可以自底向上逐层应用。Vue...

vue-cli3.0安装element-ui组件及按需引入element-ui组件

1,在 命令行输入   vue add element 2,How do you want to import Element? --&gt;选择 Import on demand (关键)按需引入 ❯ Fully import  全局引入 Choose the locale you want to load...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top