Vue2创建过程记录

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 一、搭建node
  • 二、安装Vue CLI
  • 三、搭建新项目
  • 四、Elemet安装(参照官网步骤[Element官网](https://element.eleme.cn/#/zh-CN/component/installation))
  • 后续继续补充学习过程中遇到的该注意点及注意事项。


新手记录创建VUE2项目过程


提示:以下是本篇文章正文内容,下面案例可供参考

一、搭建node

1.确保电脑已安装了node
2.检查是否安装成功:打开cmd,输如 node -v,如果输出了版本号,即代表我们安装成功了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ab6270e29aa6499385a2c0b8de43c557.png)

二、安装Vue CLI

1.在cmd中输入 npm install -g @vue/cli
代码如下(示例):
注意:如果安装过旧版的VUE CLI需要先卸载掉

npm uninstall vue-cli -g 

2.执行vue -V 查看版本:如果输出版本号,说明我们安装vue成功
在这里插入图片描述

三、搭建新项目

1.通过cmd跳转到你要存放项目的磁盘/文件夹,执行如下命令

vue create <Project Name> //文件名 不支持驼峰(含大写字母)

在这里插入图片描述
2.选择要创建的是Vue3 还是Vue2,我这里是选择的2,然后等待完成即可;
在这里插入图片描述3.出现如下界面就代表完成了。
在这里插入图片描述
4.启动项目,首先需要先进入到项目根目录 cd myvue2project,然后执行 npm run serve即可,
然后访问如下地址即可

cd myvue2project 
npm run serve

在这里插入图片描述

四、Elemet安装(参照官网步骤Element官网)

1.用vscode打开创建好的项目,新建终端,终端中输入如下命令,等待完成。

npm i element-ui -S

2.继续在终端中输入如下命令,等待完成。

npm install babel-plugin-component -D

3.修改main.js中代码如下

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app')

4.接下来就可以在页面上使用element的组件了。


后续继续补充学习过程中遇到的该注意点及注意事项。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Hibernate多事务同时调用update(T t) ,字段被覆盖问题

前言 今天现网有个订单卡单了&#xff0c;经过排查发现没有任何异常日志&#xff0c;根据日志定位发现本应该更新的一个状态&#xff0c;也sql肯定执行了(使用了Hibernate的ORM框架)&#xff0c;但是数据库里面的状态没有更新。大概逻辑如下 String hql from orderInfo where…

Could not resolve all files for configuration

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、 推荐阅读 一、导…

《前端防坑》- JS基础 - 你觉得typeof nullValue === null 么?

问题 JS原始类型有6种Undefined, Null, Number, String, Boolean, Symbol共6种。 在对原始类型使用typeof进行判断时, typeof stringValue string typeof numberValue number 如果一个变量(nullValue)的值为null&#xff0c;那么typeof nullValue "?" const u …

C++的并发世界(十一)——线程池

0.线程池的概念 1.线程池使用步骤 ①初始化线程池&#xff1a;确定线程数量&#xff0c;并做好互斥访问&#xff1b; ②启动所有线程 ③准备好任务处理基类&#xff1b; ④获取任务接口&#xff1a;通过条件变量阻塞等待任务 2.atomic原子操作 std:atomic是C11标准库中的一个…

QT学习day4

widget.h #define WIDGET_H #include <QWidget> #include <QTime>//时间类 #include <QTimerEvent>//定时器类 #include <QPushButton>//按钮类 #include <QTextToSpeech>//语音播报 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_E…

After Effects 2024 中文激活版 高效工作流程与创新的视觉特效 mac/win

After Effects 2024是Adobe公司推出的一款专业视频特效制作软件&#xff0c;广泛应用于电影、电视、动画等媒体制作领域。它凭借强大的功能和灵活的操作&#xff0c;帮助用户轻松创建电影级影片字幕、片头和过渡效果&#xff0c;以及实现立体效果和动态场景的切换。 同时&#…

机器学习中的激活函数

激活函数存在的意义&#xff1a; 激活函数决定了某个神经元是否被激活&#xff0c;当这个神经元接收到的信息是有用或无用的时候&#xff0c;激活函数决定了对这个神经元接收到的信息是留下还是抛弃。如果不加激活函数&#xff0c;神经元仅仅做线性变换&#xff0c;那么该神经网…

【电路笔记】-逻辑或非门

逻辑或非门 文章目录 逻辑或非门1、概述2、晶体管逻辑或非门3、数字逻辑或非门类型4、通用或非门逻辑或非门是数字逻辑或门与反相器或非门串联的组合。 1、概述 或非(Not-OR)门的输出通常为逻辑电平“1”,并且仅当其任何输入处于逻辑电平“1”时才变为“低”至逻辑电平“0”…

蓝桥杯 每日2题 day4

碎碎念&#xff1a;好难好难&#xff0c;&#xff0c;发呆两小时什么也写不出来&#xff0c;&#xff0c;&#xff0c;周六大寄了 10.阶乘约数 - 蓝桥云课 (lanqiao.cn) 暴力跑了两个小时没出来结果&#xff0c;&#xff0c;去看题解要用数学&#xff1a;约数定理&#xff0c…

谈谈什么是 Redis

&#x1f525;博客主页&#xff1a;fly in the sky - CSDN博客 &#x1f680;欢迎各位&#xff1a;点赞&#x1f44d;收藏⭐️留言✍️&#x1f680; &#x1f386;慢品人间烟火色,闲观万事岁月长&#x1f386; &#x1f4d6;希望我写的博客对你有所帮助,如有不足,请指正&#…

Docker功能简单学习及使用

Docker是什么 Docker是一个快速构建&#xff0c;运行&#xff0c;管理应用的工具 传统基于linux安装程序较为复杂繁琐&#xff0c;使用docker可以快速的进行项目部署和管理 镜像与容器 Docker进行安装应用时&#xff0c;会自动搜索并下载应用镜像(image)。镜像不仅包含应用本…

GitLab教程(一):安装Git、配置SSH公钥

文章目录 序一、Git安装与基本配置&#xff08;Windows&#xff09;下载卸载安装基本配置 二、SSH密钥配置 序 为什么要使用代码版本管理工具&#xff1a; 最近笔者确实因为未使用代码版本管理工具遇到了一些愚蠢的问题&#xff0c;笔者因此认为代码版本管理工具对于提高团队…

魔法阵-蓝桥每日真题

0魔法阵 - 蓝桥云课 (lanqiao.cn) #include <iostream> #include <queue> #include <vector> #include <cstring> #include <algorithm>using namespace std;#define x first #define y second const int N 1010; const int inf 1e4; vector&…

【汇编语言实战】求两组给定数组最大值

C语言描述该程序流程&#xff1a; #include <stdio.h> int main() {int arr1[]{11,33,23,542,12233,5443,267,456,234,453};int arr2[]{21,123,432,45,234,534,6517,678,879,1};int maxarr1[0];for(int i1;i<10;i){if(arr1[i]>max){maxarr1[i];}}printf("%d\…

蓝桥杯练习系统(算法训练)ALGO-956 P0702 strcmp 函数

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 在C语言中&#xff0c;有一个strcmp函数&#xff0c;其功能是比较两个字符串s1和s2。请编写一个你自己的字符串比较函数my_strcmp&…

设计模式——装饰器模式09

装饰器模式&#xff1a;是在原有基础上进行装饰&#xff08;无修改原来代码&#xff09;&#xff0c;来添加新的功能。 例如下面对普通耳机进行装饰。 设计模式&#xff0c;一定要敲代码理解 修饰对象&#xff08;抽象&#xff09; /*** author ggbond* date 2024年04月07日…

ShardingSphere-ShardingSphere读写分离和数据脱敏

文章目录 一、读写分离1.1 读写分离1.2 读写分离应用方案1.3 分表+读写分离1.4 分库分表+读写分离二、ShardingSphere-JDBC读写分离2.1 创建SpringBoot并添加依赖2.2 创建实体类2.3 创建mapper2.4 配置读写分离2.5 测试测试插入数据测试读测试事务一致性测试负载均衡一、读写分…

appium图像识别之images-plugin插件

在进行App自动化测试的过程中&#xff0c;由于页面的复杂性&#xff0c;需要根据页面的技术实现&#xff0c;通过上下文来切换不同的定位类型&#xff0c;给定位元素的稳定性带来了不小的挑战&#xff1b;图像识别技术则不依赖于页面本身是用什么技术实现的&#xff0c;只要能识…

打卡--MySQL8.0 四 (索引及执行计划)

一、索引的创建与使用 1、索引的分类 MySQL的索引包括普通索引、唯一性索引、全文索引、单列索引、多列索引和空间索引等。 &#xff08;1&#xff09;从 功能逻辑 上说&#xff0c;索引主要有 4 种&#xff0c;分别是普通索引、唯一索引、主键索引、全文索引。 &#xff08;…

【微服务】------服务注册

在 微服务的基建工作 中提到过&#xff0c;在云原生、微服务时代&#xff0c;如果还是手动修改服务地址&#xff0c;是几乎不可完成的工作&#xff0c;需要一种机制完成自动上报和获取服务地址的支撑组件&#xff0c;可以保障服务的快速上线和下线&#xff0c;这就是服务注册/发…