从零搭建vue + element-plus 项目

目录

从零搭建vue + element-plus 项目

环境安装

安装项目

安装命令如下:

选择配置如下:

安装插件与启动服务

安装element框架

使用element框架

测试element是否安装成功

环境判断

安装插件

使用插件

配置变量

暴漏变量

测试与使用

可视化开发

创建项目

选择文件根目录

创建页面

创建路由

去掉多余的代码

main.cs去掉多余的样式

填写预览地址

Element组件使用教程

插入系统架构

axios接口请求

安装命令

Main.js引用

Vue3页面中调用接口

从零搭建vue + element-plus 项目

环境安装

下载node,

下载guiplan

guiplan

查看是否安装成功:

Window + R

输入 cmd

输入node -v

安装项目

安装命令如下:

npm init vue@latest

选择配置如下:

这里要注意以下Yes或No ,选择Yes之前必须先按空格,不按空格则表示选择No

没看太懂这种写法。

 

安装插件与启动服务

cd uploadMange2

npm install

npm run dev

如下的地址为预览地址。浏览器即可打开。

 

安装element框架

npm install element-plus --save

或yarn add element-plus

使用element框架

main.js添加配置

import { createPinia } from 'pinia'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

完整代码如下:

 

测试element是否安装成功

homeView页面中添加el-button如下

 

如果页面能正常显示按钮,则表示框架安装成功

 

环境判断

如果想用env文件来配置环境变量则需如下几步:

安装插件

npm install dotenv --save-dev

使用插件

Vite.config.js 中使用插件,即可识别。(如果你的后端是express或koa等node后端也可以使用此方式使用环境变量)

import dotenv from 'dotenv';

if(process.env.NODE_ENV == 'production'){ // 生产环境用另一个配置

dotenv.config({ path: path.join(__dirname, '/.env.' + process.env.NODE_ENV) })

}else{

dotenv.config() // 默认env文件为开发环境

}

这样默认env文件为开发环境下的变量,.env.production为生产环境中的变量

配置变量

.env 文件即可配置开发环境中的变量

.env.production 文件即可配置 生存环境中的变量。

内容如下.env

HOSTURL=http://localhost:3000

.env.production

HOSTURL=http://localhost:8086

暴漏变量

随便以上将变量配置好了,但只能在node环境下使用。如果想让浏览器也能使用,我们还得继续配置将其变量暴漏给浏览器。

如下几步:

Vite.config.js配置环境变量

代码如下:也就是vite会自动暴漏一个公共变量给前端。而
define: {

    'process.env':process.env

  },

  build: {

    define: {

      'process.env': process.env

    },

  }

测试与使用

控制台输入 process.env.HOSTURL 能打印出http://localhost:3000 则表示配置成功

使用的话也很简单,process.env.HOSTURL充当全局变量使用即可。

去掉多余的代码

App.vue将如下代码删除

 

main.cs去掉多余的样式

 

设置基本样式

去掉内距边距

body{padding:0;margin:0}

可视化开发

创建项目

打开guiplan软件,点击新建项目。选择element框架,选择vue3

 

选择文件根目录

如果不知道根目录可直接找到自己项目的package.json文件所在目录。

 

 

创建页面

点击项目进入到页面,点击创建页面

 

此时views里自动创建了home.vue文件

 

创建路由

由于项目不是guiplan自带的,路由需要自己配置。

src->router->index.js

 

填写预览地址

在guiplan中填写预览地址,此时即可可视化开发。

 

axios接口请求

小项目直接按以下教程使用,大项目需要登录,需要token则自行用封装拦截器

安装命令

npm install axios vue-axios

Main.js引用

import axios from 'axios'

import VueAxios from 'vue-axios'

app.use(VueAxios, axios)

Vue3页面中调用接口

proxy.axios.get('https://jsonplaceholder.typicode.com/posts')

      .then(response => {

        this.posts = response.data

 })

api的封装教程

1.登录页面执行流程_哔哩哔哩_bilibili

 

Element组件使用教程

插入系统架构

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web前端神器

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值