1.Vue2使用ElementUI-初识及环境搭建

目录

1.下载nodejs v16.x

2.设置淘宝镜像源

3.安装脚手架

4.创建一个项目

5.项目修改


代码地址:source-code: 源码笔记

1.下载nodejs v16.x

下载地址:Node.js — Download Node.js®

2.设置淘宝镜像源

npm config set registry https://registry.npmmirror.com/

3.安装脚手架

vue2.x语法参考官网(后续更新3.x教程):介绍 — Vue.js

安装 | Vue CLI

npm install -g @vue/cli# 可以用这个命令来检查其版本是否正确
vue --version

可能发生的问题

vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本

解决: 搜索powershell,以管理员的身份运行 输入下面的指令:set-ExecutionPolicy RemoteSigned 选择y

4.创建一个项目

创建一个项目 | Vue CLI

vue create vue

 

  

# 启动
cd vue
npm run serve

5.项目修改

# 修改vue/vue.config.jsconst { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({devServer: {port: 7000},chainWebpack: config => {config.plugin('html').tap(args=> {args[0].title = "oslee好帅"return args})}
})
# vue/src/App.vue<template><div id="app"><router-view/></div>
</template>
# vue/src/views/HomeView.vue<template><div>主页</div>
</template><script>
export default {name: 'HomeView',
}
</script>
# vue/src/router/index.jsimport Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: () => import(/* webpackChunkName: "about" */ '../views/HomeView.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router
# vue/src/assets/css/global.css* {box-sizing: border-box;
}
body{color: #333;font-size: 14px;margin: 0;padding: 0;
}

6.安装Element-UI

Element-UI网址:Element - The world's most popular Vue UI framework

# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com/# 查看npm镜像
npm config get# 也可安装nrm管理npm镜像
npm install nrm -g# 切换镜像并查看
nrm ls
nrm use taobao
nrm current# 安装element-ui
npm i element-ui -S

7.引入Element-UI 

在main.js中写入以下内容:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/global.css'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI, {size:'small'});new Vue({router,render: h => h(App)
}).$mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/25024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud-OpenFeign拓展-连接池、最佳使用方法、日志输出

目录 1 OpenFeign连接池 1.1 常见连接类型 1.2 连接池使用方法 1.2.1 引入依赖 1.2.2 开启连接池功能 1.2.3 配置完成&#xff0c;重启实例即可&#xff0c;底层将更改设置。 2 OpenFeign最佳使用方法 2.1 每个微服务都是单独的project&#xff0c;内部有三个独立模块 …

Docker:认识镜像仓库及其命令

文章目录 Docker Registry什么是Docker Registry 镜像仓库工作机制使用流程实际使用方法仓库的拉取机制 常用的镜像仓库---DockerHub什么是DockerHub私有仓库 镜像仓库命令docker logindocker pulldocker pushdocker searchdocker logout Docker Registry 什么是Docker Regist…

编译遇到找不到pcap.so 问题

1.locate 定义pcap.so locate pcap.so 如果存在则打印所有路径 使用软连接将pcap.so 的实际位置连接到编译的lib 目录下 ln -s /usr/lib/x86_64-linux-gnu/libpcap.so /usr/lib/libpcap.so 编译 提示 说明程序中编译的目标程序需要的库与现有的不兼容&#xff0c;一般都是3…

Mysql使用中的性能优化——单次插入和批量插入的性能差异

一般Mysql的客户端和服务端不在一台机器上&#xff0c;所以它们之间的通信需要通过网络进行。我们本次实验&#xff0c;希望抛开网络的影响&#xff0c;测试不同SQL方案在Mysql服务器上的执行效率的对比。于是我们使用“存储过程”来辅助测试。 结论 先上结论&#xff1a; 批…

Servlet基础(续集)

Servlet原理 Servlet是由Web服务器调用&#xff0c;Web服务器在收到浏览器请求之后&#xff0c;会&#xff1a; Mapping问题 一个Servlet可以指定一个映射路径 <servlet-mapping><servlet-name>hello</servlet-name><url-pattern>/hello</url-pa…

vue3 实现自定义指令封装 --- 通俗易懂

1、局部自定义指令 1.1 在<script setup>定义组件内的指令&#xff0c;任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令 <template><div><h3>使用自定义指令</h3><div>########################## start 局部自定义指令</d…

Docker大学生看了都会系列(八、Dokcerfile部署go项目)

系列文章目录 第一章 Docker介绍 第二章 2.1 Mac通过Homebrew安装Docker 第二章 2.2 CentOS安装Docker 第三章 Docker常用命令 第四章 常用命令实战 第五章 Docker镜像详解 第六章 Docker容器数据卷 第七章 Dockerfile详解 第八章 Dokcerfile部署go项目 文章目录 一、前言二、环…

解决Android Studio Iguana版本不显示原创的GradleTask问题

问题描述&#xff1a; 下面是我的AndroidStudio版本号&#xff0c;升级后我发现项目里面自定义的gradletask找不到了&#xff1f;&#xff1f;&#xff1f; 解决方案&#xff1a; 1、去setting里面把下面红框里面的选项勾选一下&#xff0c;缺点就是sync的时候会慢一些。 2、…

可以抛弃纸质礼金簿了,以后登记礼金可以用这款小程序

可以抛弃纸质礼金簿了&#xff0c;以后登记礼金可以用这款小程序 小程序介绍使用主要技术代码来源项目演示首页和我的关于和设置收礼功能送礼功能我的家庭和数据统计 总结 大家好&#xff0c;这里是程序猿代码之路&#xff0c;先说说为什么想搞这一个小程序呢&#xff0c;主要是…

linux部署运维3——centos7下导入导出mysql数据库的sql文件以及查询数据量最大的表信息

在实际项目开发或者项目运维过程中&#xff0c;数据库的导入导出操作比较频繁&#xff0c;如果可以借助第三方工具那当然算喜事一桩&#xff1b;但是如果不允许外部访问&#xff0c;那么就只能使用数据库自带的命令&#xff0c;也是相当方便的。 一.导入sql文件 1.在linux命令…

pxe自动装机与无人值守

一、pxe与无人值守 pxe&#xff1a;c/s 模式&#xff0c;允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。 pxe的优点&#xff1a; 1、规模化 同时装配多台服务器&#xff08;20多&…

zookeeper启动(一)

1.zookeeper启动入口 在zkServer.sh的启动命令中,我们可以找到zookeeper启动的关键类org.apache.zookeeper.server.quorum.QuorumPeerMain QuorumPeerMain#main 我们可以直接看org.apache.zookeeper.server.quorum.QuorumPeerMain中的main方法,从下面的main方法中,我们可以…

专为Mac设计的窗口管理Magnet 中文

Magnet是一款专为Mac设计的窗口管理工具软件。它具备强大的多窗口管理能力&#xff0c;支持用户通过简单的拖放操作&#xff0c;将应用程序窗口快速对齐、排列和分组。此外&#xff0c;Magnet还提供了预设的布局选项和自定义设置功能&#xff0c;帮助用户实现个性化的窗口布局。…

本地部署GLM-4-9B清华智谱开源大模型方法和对话效果体验

GLM-4-9B是清华大学和智谱AI推出的最新一代预训练模型GLM-4系列中的开源版本。在语义、数学、推理、代码和知识等多方面的数据集测评中&#xff0c;GLM-4-9B及其人类偏好对齐的版本GLM-4-9B-Chat均表现出较高的性能&#xff0c;其通用能力评测结果甚至超越了Llama-3-8B开源大模…

多样本上下文学习:开拓大模型的新领域

大模型&#xff08;LLMs&#xff09;在少量样本上下文学习&#xff08;ICL&#xff09;中展现出了卓越的能力&#xff0c;即通过在推理过程中提供少量输入输出示例来学习&#xff0c;而无需更新权重。随着上下文窗口的扩展&#xff0c;我们现在可以探索包含数百甚至数千个示例的…

pdf怎么编辑修改内容?3个实用软件!

在当今数字化时代&#xff0c;PDF文件因其跨平台、格式固定的特性&#xff0c;成为我们日常工作和生活中不可或缺的一部分。然而&#xff0c;PDF文件的修改和编辑往往成为许多人的难题。本文将为您详细介绍如何编辑修改PDF文件的内容&#xff0c;并推荐几款实用的编辑软件&…

搭建多平台比价系统需要了解的电商API接口?

搭建一个多平台比价系统涉及多个步骤&#xff0c;以下是一个大致的指南&#xff1a; 1. 确定需求和目标 平台选择&#xff1a;确定你想要比较价格的平台&#xff0c;例如电商网站、在线旅行社等。数据类型&#xff1a;明确你需要收集哪些数据&#xff0c;如产品价格、产品名称…

nginx中配置ssl证书(宝塔面板)

首先申请一个SSL证书&#xff0c;这里我申请的joyssl的免费证书。提交订单申请后&#xff0c;按照页面提示在域名解析中将CNAME和记录值配置好。 比如我用的阿里云&#xff0c; 这是好后&#xff0c;需要等几分钟&#xff0c;然后域名检验成功。 然后点击joyssl的左侧菜单的“证…

消息队列笔记

异步技术 企业级应用中广泛使用的三种异步消息传递技术 原文链接&#xff1a;https://blog.csdn.net/qq_55917018/article/details/122122218 三种异步消息传递技术 JMS (java message service) 一个Java规范&#xff0c;等同于JDBC规范&#xff0c;提供了与消息服务相关的…

Web后端开发(请求-简单参数)(一)

原始方式&#xff1a; 在原始的web程序中&#xff0c;获取请求参数&#xff0c;需要通过HttpServletRequest 对象手动获取。 RequestMapping("/simpleParam") public String simpleParam(HttpServletRequest request){//获取请求参数String name request.getParame…