Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境 配置环境
项目介绍
使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。
纯属练手(写的比较糙 望指点)
基本环境搭建 初始化项目
使用 vue 以及 element-ui 搭建一个 后台管理系统的模板。
纯属练手(写的比较糙 望指点)
1、初始化项目(babel vuex router eslint)
vue create sandcms
2、等待 出现以下提示 进入项目并启动
3、启动项目 成功后进入以下界面 即创建成功
npm run serve
基本环境配置
1、自定义配置文件(此处为 vue-cli 4.0 创建的项目)
(1)为什么使用自定义配置?
有时候项目默认配置不能满足需求,可以手动去配置。
【vue-cli 配置文件官方地址:】https://cli.vuejs.org/zh/config
(2)如何使用?
想要使用自定义配置,首先需要在 项目的根目录下 创建一个 vue.config.js。
使用 json 格式进行配置。
配置文件各属性可以自行查阅官方文档(此处不过多展开,简单举两个例子)。
module.exports = {}
(3)修改端口号
项目默认 使用 8080 端口访问项目,当 8080 被占用时,会自动选择新的端口打开。
可以自定义端口访问,如下定义端口为 4000。
module.exports = {devServer: {port: 4000}
}
重启项目
2、生产环境、开发环境
(1)简介
开发的过程中,一般分为 开发、测试、生产等环境。
不同的环境下,会有不同的变量、属性(比如 端口、ip 地址不同)。
所以需要对不同的环境设置不同的配置文件。
(2)开发环境、生产环境
【参考文档:】https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
在当前项目的根目录下,创建 两个文件(.env.development、.env.production)。
其中:
.env.development 是开发环境会加载的文件,即 npm run serve 时,会加载 .env.development。
.env.production 是生产环境会加载的文件(打包后的文件),即 npm run build 时,会加载 .env.production。
(3)简单使用
a》给 .env.development 添加一个变量。
命名规则: VUE_APP_ + 变量名 。
b》给 .env.production 添加一个变量。
c》通过 process.env.VUE_APP_URL 获取该变量。
获取规则 process.env.VUE_APP_ + 变量名。
<template><div class="about"><h1>{{proUrl}}</h1></div>
</template>
<script>
export default {data() {return {proUrl:process.env.VUE_APP_URL}},
}
</script>
d》重启项目,输出8000 即加载的是 .env.development文件
e》执行 npm run build,用于打包项目,生成 dist 文件。
f》运行 dist。
直接访问 dist 的 index.html 页面 是不会成功的,需要使用服务器启动才能访问。
【全局安装 serve】npm install -g serve【执行 dist】进入 dist 目录,输出 serve或者 直接 serve -s dist路径,比如 serve -s E:\vue\front\disthttp://localhost:3000
补充:哦?启动项目的时候有报错?
来来来 仔细看文章
vue.config.js加上配置lintOnSave:false 就搞定了
Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境 配置环境相关推荐
- element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
- Vue + ElementUI 实现后台管理系统模板 -- 前端篇(四):定义主页面
一.定义主页面 主页面 可以拆分成多个组件,每个组件负责一部分页面的显示. 拆分成 Header.Aside.Footer.Content 四个页面. 其中: Header 用于定义 ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
- SpringBoot+Vue+ElementUI实现后台管理系统
前言 今天学习了如何搭建一个后台管理系统,因此打算记录并总结一下今天的学习内容. 该项目是一个非常好用的后台管理系统模板,代码比较简单,项目功能比较通用,总之就是很推荐初学者学习. 项目的大体项目框架 ...
- vue+ElementUI实现后台管理系统(二)
一.项目地址 项目链接 Getting started # clone the project git clone https://github.com/PanJiaChen/vue-element- ...
- Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现
目录:导读 项目搭建 + ⾸⻚布局实现 一.项目搭建 1.环境搭建 2.项目初期搭建 二.Main.vue 三.左侧栏部分(CommonAside.vue) 四.header部分(CommonHead ...
- Vue 项目应用 —— 后台管理系统模板
登陆页效果预览 目前只实现了简单的登录和客户档案的添加和显示功能,后面会进一步更新功能. 用户名:dk 密码:123 源码:https://github.com/dk-lan/vue... 项目说明 ...
- 基于Vue+ElementUI的后台管理系统开发的总结
第一步:工具的介绍 工欲善其事必先利其器,所以首先先总结一下这个项目中的使用到的工具,主要是对自己不熟悉也是第一次接触的一些东西的总结,这些工具大概分成3类:项目管理工具.项目打包工具.项目运行依赖 ...
- 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)一:项目规划及初始化
一.项目内容 使用vue3+Layui实现通用管理系统前端,使用vue3+layui搭建系统UI界面,使用nodejs搭建模拟web服务器,使用echarts实现系统可视化模块,可以此项目为基础进 ...
最新文章
- 函数09 - 零基础入门学习C语言40
- Python编程基础:第五节 用户输入User Input
- 神策数据上线 IPTV Demo ,三大价值助力数据驱动
- zzuliOJ【土豪婷婷请吃饭】【解法:Java二维数组】
- 质数的和与积(信息学奥赛一本通-T1405)
- Oracle11g修改实例名和数据库名
- 刚构桥的优缺点_[中交公规院]预应力连续刚构桥总体设计及主要尺寸
- C++ 为什么要引入异常处理机制
- 为什么用TreeView绑定XML文件时总是提示:根级别上的数据无效。
- python实现xml数据解析处理
- 云计算大败局:基因与宿命
- MySQL下载安装与配置详细教程
- Java 学习笔记:第十一章 多线程技术
- C语言4位BCD码加法器,四位二进制8421BCD码加法器.doc
- 存储之磁盘阵列RAID
- 数据结构与算法复习第一弹(快速排序)
- 共享锁与排他锁的关系
- 加拿大计算机硕士gpa不够,[加拿大硕士留学gpa不够怎么算]加拿大硕士留学,GPA不够怎么办...
- python xls 转化 xlsx
- AWD比赛入门攻略总结