首页 > 其他分享 >从0到1开始搭建vue2+element ui 后台管理系统

从0到1开始搭建vue2+element ui 后台管理系统

时间:2024-07-12 16:54:07浏览次数:16  
标签:vue install cnpm loader ui vue2 element 安装

一、前期准备(如果已搭建的可以往下看)

1. 安装node (node -v查询版本号) (下载地址:https://nodejs.org/en/download/)

2. 安装淘宝镜像命令: npm install -g cnpm --registry=https://registry.npmmirror.com

 

 

3. 安装 webpack,以全局的方式安装 命令:npm install webpack -g

4.全局安装vue以及脚手架vue-cli命令:npm install @vue/cli -g --unsafe-perm

二、项目创建

1.创建vue项目命令 vue create 项目名称

2.选择手动配置(Manually select features)

3.选择需要使用的特性:Babel,Router,Vuex,CSS Pre-processors,Linter / Formatter(单元、E2E测试不选,ts根据项目情况选)(空格键选中)

4.选择vue版本

 5.router 选择路由模式:选用history(URL 中不带有 # 符号,但需要后台配置支持)

 

 6.选择 CSS Pre-processors:Sass(因为element使用Sass)

7.选择 Linter / Formatter(Pick a linter / formatter config: (Use arrow keys):通常选择ESLint + Standard config

 8.选择在什么时间进行检测(Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection))

 9.选择在什么位置保存配置文件(Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys))

 10.选择是否保存本次配置以便于下次使用(Save this as a preset for future projects? (y/N)):N

 11.vue项目创建完成

 

12.根据终端的提示,cd进入项目后,执行npm run serve

 12.访问http://localhost:8080 出现一下页面,说明vue项目npm run serve执行成功

项目目录文件

 

 三、搭建element UI

1.导入element UI

官方文档:https://element.eleme.cn/#/zh-CN/component/installation

全局导入命令:npm i element-ui -S

如果导入不成功执行命令:cnpm i element-ui -S

2.在main.js中引入

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import store from './store'
 5 import 'element-ui/lib/theme-chalk/index.css'
 6 import ElementUI from 'element-ui'
 7 
 8 Vue.use(ElementUI)
 9 Vue.config.productionTip = false
10 
11 new Vue({
12   router,
13   store,
14   render: h => h(App)
15 }).$mount('#app')

 

四、安装必要的基础扩展包

 1.为方便变成,引入lodash工具库。命令:cnpm i --save lodash

 2.安装css-loader style-loader(安装style-loader是为了在html中以style嵌入css)

   安装 css-loader:cnpm install css-loader --save-dev

   安装 style-loader:cnpm install style-loader --save-dev

 3.安装less-loader 如果我们需要再js中,require .less文件,就需要安装less less-loader 包

  安装less命令: cnpm install less --save-dev

 安装less-loader 命令: cnpm install less-loader  --save-dev

4.安装script-loader(脚本加载器)轻松管理你的js 类库

 安装script-loader命令: cnpm install script-loader  --save-dev

5.安装日期插件dayjs

 安装dayjs命令:cnpm install dayjs --save

 6.安装crypto-js加密插件

安装dayjs命令:cnpm install crypto-js

 7.安装tree-table-vue表格

安装tree-table-vue命令:cnpm i tree-table-vue -S

 8.安装跨域axios 

安装axios命令:cnpm install axios -S

 

标签:vue,install,cnpm,loader,ui,vue2,element,安装
From: https://www.cnblogs.com/520fyl/p/18298030

相关文章

  • AI绘画神器ComfyUI 整合包:工作流界面,解压即用,快速入门AI绘画进阶教程
    大家好,我是设计师阿威赛博佛祖秋葉Aki之前发布了针对ComfyUI的整合安装包,让这款原本偏专业的AI绘画工具对初学者来说更容易上手使用了,我也安装试用了一下,的确非常方便,今天就为大家详细介绍一下整合包的用法~一、ComfyUI简介ComfyUI和大家熟知的WebUI一样,都是......
  • element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态
    element-ui表格中的复选框默认选中状态、禁用状态以及默认选中不可取消状态_表格中el-checkbox默认显示选择-CSDN博客<el-tableref="multipleTable":data="tableData3"tooltip-effect="dark"style="width:100%"@selection-change="handleS......
  • Go 语言 UUID 库 google/uuid 源码解析:UUID version4 的实现
    google/uuid库地址本文将解析googl/uuid库中UUID变体10版本4的实现。版本4的UUID采取完全随机的方式实现,简单来说就是将UUID中的122位全部随机填充(剩余的6位作标记位)。版本4的UUID存在一定的重复风险,但就如源码注释中所说:“一年内创建几十万亿个UUI......
  • ComfyUI进阶篇:ControlNet核心节点
    前言:ControlNet_aux库包含大量的图片预处理节点,功能丰富,适用于图像分割、边缘检测、姿势检测、深度图处理等多种预处理方式。掌握这些节点的使用是利用ControlNet的关键,本篇文章将帮助您理解和学会使用这些节点。目录一、安装方法二、模型下载三、Segmentor节点四、Lines节......
  • text2speech文生音频模型XTTS-V2部署带UI
    text2speech文生音频模型XTTS-V2部署带UI模型下载链接,及前端代码效果链接见个人博客:https://pylzzz.online效果图:python后端代码flask框架由于使用的是自己电脑的gpu运算,所以中间有转发的过程,利用内网穿透和虚拟局域网通信。内网穿透教程可见个人博客所需依赖tts......
  • QtQuick.Dialogs中的FileDialog设置默认目录的问题
    在QML中,假如想要使用文件浏览器选择文件或者文件夹时。可以使用FileDialog。FileDialog有个属性folder,设置好路径之后,当你打开fileDialog时,fileDialog当前定位到的路径就是你设置的路径。但是这个folder的设置有点问题,和路径的层级有关系假如你的目标路径是大于等于三级的(比如......
  • 界面组件Kendo UI for React 2024 Q2亮点 - 生成式AI集成、设计系统增强
    随着最新的2024年第二季度发布,KendoUIforReact为应用程序开发设定了标准,包括生成式AI集成、增强的设计系统功能和可访问的数据可视化。新的2024年第二季度版本为应用程序界面提供了人工智能(AI)提示,从设计到代码的生产力增强、可访问性改进、一系列新的UI组件等。KendoUI致力......
  • layui js thymeleaf 公共工具类
    layuijsthymeleaf公共工具类其中功能包括:普通表格渲染树形表格渲染普通编辑(添加/删除/编辑)更多编辑(添加/编辑/更多)上传图片constcommon={getTable(table,url,cols,condition){if(!condition||condition==''){condition=......
  • Vue3.4+Element-plus+Vite通用后台管理系统
    ......
  • Unity中用于处理 UI 的射线检测和事件处理的两种脚本
    GraphicRaycaster组件GraphicRaycaster是Unity中用于UI系统的射线检测组件。它主要用于检测屏幕上的图形界面元素(如按钮、图片、文本等)的点击事件,并将这些事件传递给相应的UI元素。主要功能射线检测:用于检测屏幕空间中的射线,确定用户点击了哪个UI元素。UI交互:处理......