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

news2024/11/25 2:35:45

目录

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.js

const { 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.js

import 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.coloradmin.cn/o/1803866.html

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

相关文章

获取东方财富网股票的实时数据股票的数据,并保存到Excel文件中

可以运行python文件获取东方财富网:【序号,代码,名称,最新价,涨跌幅,涨跌额,成交量,成交额,振幅,最高,最低,今开,昨收,量比,换手率,市盈率-动态,市净率,总市值,流通市值,涨速,5分钟涨跌,60日涨跌幅,年初至今涨跌幅,】数据,保存到Excel文件中。 import pandas as pd import re…

在Cisco Packet Tracer上配置NAT

目录 前言一、搭建网络拓扑1.1 配置PC机1.2 配置客户路由器1.3 配置ISP路由器 二、配置NAT2.1 在客户路由器中配置NAT2.2 测试是否配置成功 总结 前言 本篇文章是在了解NAT的原理基础上&#xff0c;通过使用Cisco Packet Tracer 网络模拟器实现模拟对NAT的配置&#xff0c;以加…

09.爬虫---正则解析爬取数据

09.正则解析爬取数据 1.目标网站2.具体实现3.正则表达式分析4.完整代码并存入表格 1.目标网站 直达目标网站 https://movie.douban.com/chart 2.具体实现 我们来拿取一下上面网页的代码如下: from urllib import requesturl https://movie.douban.com/chart headers {Us…

Java心跳检测机制

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 心跳检测的定义 心跳检测是一种监控机制&#xff0c;在Java编程和分布式系统中具有广泛的应用。心跳检测&#xff0c;顾名思义&#xff0c;就像心跳一样&#xff0c;是一种…

计算机网络-数制转换与子网划分

目录 一、了解数制 1、计算机的数制 2、二进制 3、八进制 4、十进制 5、十六进制 二、数制转换 1、二进制转十进制 2、八进制转十进制 3、十六进制转十进制 4、十进制转二进制 5、十进制转八进制 6、十进制转十六进制 三、子网划分 1、IP地址定义 2、IP的两种协…

【二】线控底盘

GB/T 43947-2024 低速线控底盘通用技术要求 线控协议 转向 功能子功能信号描述性能要求分辨率线控转向功能转向控制使能人工切自驾标志位上升沿0-1,有效-线控转向功能转向控制电机输出转向轴的转角。目标方向盘转角范围(deg) -500~500&#xff0c;右负&#xff0c;左正响应延…

easyexcel将csv转为excel处理数字问题

使用easyexcel可以将csv格式的文件转为.xlsx文件&#xff0c;但是csv中有很多数字&#xff0c;比如&#xff1a;"123","12.34","-111"&#xff0c;默认情况下会将其作为字符串写入.xlsx文件&#xff0c;就如同下面一样&#xff0c;字符类型的数字…

transformers 阅读:BERT 模型

前言 想深入理解 BERT 模型&#xff0c;在阅读 transformers 库同时记录一下。 笔者小白&#xff0c;错误的地方请不吝指出。 Embedding 为了使 BERT 能处理大量下游任务&#xff0c;它的输入可以明确表示单一句子或句子对&#xff0c;例如<问题&#xff0c;答案>。 …

单元测试之CppTest测试框架

目录 1 背景2 设计3 实现4 使用4.1 主函数4.2 测试用例4.2.1 定义4.2.2 实现 4.3 运行 1 背景 前面文章CppTest实战演示中讲述如何使用CppTest库。其主函数如下&#xff1a; int main(int argc, char *argv[]) {Test::Suite mainSuite;Test::TextOutput output(Test::TextOut…

Vue.js ECharts使用

一、介绍 ECharts 是一个使用 JavaScript 实现的开源可视化库&#xff0c;涵盖各行业图表&#xff0c;满足各种需求。ECharts 提供了丰富的图表类型和交互能力&#xff0c;使用户能够通过简单的配置生成各种各样的图表&#xff0c;包括但不限于折线图、柱状图、散点图、饼图、雷…

【Java毕业设计】基于JavaWeb的洗衣店管理系统

文章目录 摘要ABSTRACT目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 SpringBoot框架1.4.2 MySQL数据库1.4.3 MVC模式 2 系统需求分析2.1 可行性分析2.2 功能需求分析 3 系统设计3.1 功能模块设计3.2 系统流程设计3.3 数据库设计3.3.1 …

[每周一更]-(第100期):介绍 goctl自动生成代码

​ 在自己组件库中&#xff0c;由于部分设计会存在重复引用各个模板的文件&#xff0c;并且基础架构中需要基础模块内容&#xff0c;就想到自动生成代码模板&#xff0c;刚好之前有使用过goctl&#xff0c;以下就简单描述下gozero中goctl场景和逻辑&#xff0c;后续自己借鉴将自…

【uni-app】申请高德地图key,封装map.js,实现H5、iOS、Android通过getlocation获取地图定位信息

文章目录 map组件基础使用封装map.js&#xff0c;实现定位1、使用第三方地图&#xff1a;高德&#xff0c;申请对应平台key1、申请H5 key2、申请微信小程序 key3、申请android key查看证书详情&#xff0c;可以看到SHA1查看/设置Android包名 4、申请ios key 2、封装map1、lib/m…

【阿里YYDS】通义千问正式开源 Qwen2

Qwen2–72B正式开源&#xff0c;性能全面超越开源模型Llama3-70B&#xff0c;也超过文心4.0、豆包pro、混元pro等众多中国闭源大模型。 在过去一段时间里&#xff0c;Qwen系列模型从Qwen1.5升级到Qwen2&#xff0c;Qwen2分5个尺寸&#xff0c;包括Qwen2-0.5B、Qwen2-1.5B、Qwen…

启动信息全掌握,Android 15 重磅 API:ApplicationStartInfo

前言 App 进程启动的时候&#xff0c;开发者很难获悉到本次启动的详细信息&#xff0c;比如&#xff1a; 是冷启动的、暖启动的、还是热启动的&#xff1f;是被 Broadcast 拉起来的、Activity 拉起来的、还是 ContentProvider 拉起来的&#xff1f; 针对这些 pain-points&am…

ssm物流管理系统-计算机毕业设计源码44323

摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作…

解决:DevToolsActivePort file doesn‘t exist的问题

DevToolsActivePort file doesn’t exist 报错信息&#xff1a;解决办法&#xff1a;直接把sandbox禁用了。 chromeOptions.addArguments("--headless"); //设置为 headless 模式 chromeOptions.addArguments("--disable-gpu");//谷歌文档提到需要加上这…

代码随想录算法训练营第二十二天

题目&#xff1a;216. 组合总和 III 这道题和上道题非常类似&#xff0c;大体框架一样只不过修改一下终止条件而已 值得注意的是其中的剪枝条件的设置 一是靠现有的元素和已经大于目标和的话就提前终止&#xff0c;另一个是其中循环那个剪枝可以记住 i < n - (k - path.s…

二开版微交易系统

下载地址&#xff1a;二开版微交易系统

Dockerfille解析

用于构建Docker镜像的文本&#xff0c;由一条条指令构成 Docker执行Dockerfile的流程 1. Docker从基础镜像执行一个容器 2. 执行一条指令并对容器进行修改 3. 执行类型Docker commit的命令添加一个新的镜像层 4. Docker再基于新的镜像执行一个新的容器 5. 执行Dockerfile中…