从零搭建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组件使用教程
插入系统架构
