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的组件了。


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

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

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

相关文章

003 传参

文章目录 传参http 状态码传参方式&#xff08;1&#xff09;URL请求参数 key 与 方法中的形参名一致&#xff08;2&#xff09;URL请求参数 key与RequestParam("id") 中的别名一致&#xff08;3&#xff09; 形参是POJO类&#xff0c;URL 参数 key 与pojo类的 set方…

MXNet安装流程详解:跨平台、全版本兼容

一、 MXNet简介 1.1 MXNet的特点 MXNet是一种高效、灵活、可扩展、跨平台的深度学习框架&#xff0c;具有以下显著特点&#xff1a; - 高效&#xff1a;MXNet采用了多种并行处理技术&#xff0c;可以利用CPU和GPU的计算能力&#xff0c;有效地加速了模型训练和推理的速度。 …

Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器

http://www.your-server.com/ 这是一级目录&#xff0c;由于项目多&#xff0c;一般会通过二级域名http://oa.your-server.com/或二级目录http://www.your-server.com/oa来发布&#xff0c;本篇记录一下二级目录发布。先看效果 1、router/index.js配置base export default new …

【Linux】进程间通信——匿名管道|命名管道

目录 什么是进程间通信 管道 匿名管道 什么是进程间通信 进程间通信&#xff0c;顾名思义就是两个进程互相通信。 可是进程是独立的&#xff0c;该如何通信呢&#xff1f; 类比你和你的朋友在网上聊天&#xff0c;你们两个人也是独立的&#xff0c;是如何通信的呢&#xf…

linux常见使用命令

查看CPU内存 cat /proc/cpuinfo 动态查看 top 部分版本中没有&#xff0c;需要自行安装的命令 dstat 查看内核版本号 uname -r 系统版本的全部信息 uname -a 查看所有关于网络的相关信息 netstat -anp 查看8080端口是否被占用 netstat -anp | grep 8080 指定进程名字都有那些连…

Meta Earth:模块化公链的技术革新与市场潜力解析

随着加密货币市场逐渐回暖&#xff0c;投资者和技术爱好者都在寻找下一个重大机遇&#xff0c;特别是在比特币ETF获批和比特币减半事件的到来&#xff0c;全球加密货币市场正迎来新一轮的牛市周期。在此背景下&#xff0c;模块化公链技术作为区块链领域的一大创新点&#xff0c…

详解 node/浏览器 事件循环中的微任务的优先级

关于事件循环机制&#xff0c;可以参考这篇文章 node 环境中的微任务 这里面补充一个&#xff0c;node 中微任务是有优先级的&#xff0c;常见的微任务有&#xff0c;其中 process.nextTick 的优先级最高&#xff0c;会优先执行&#xff0c;剩下的按照进入微任务队列的顺序&a…

pinia数据持久化

下载 pnpm i pinia 在 main.ts/js文件里面进行配置 import { createApp } from vue import App from ./App.vue import router from ./router // ① 引入createPinia方法从pinia import { createPinia } from pinia const app createApp(App) const pinia createPinia…

2024年第五届计算机视觉与信息技术国际会议(CVIT 2024)即将召开!

2024年第五届计算机视觉与信息技术国际会议&#xff08;CVIT 2024&#xff09;将于2024年8月16-18日在北京举行。CVIT 2024由北方工业大学主办&#xff0c;国内外的专家学者将齐聚一堂&#xff0c;共同分享最新的技术突破、研究方法和应用案例&#xff0c;共同推动计算机视觉与…

开启未来之门:Victoria VR 与 OpenAI 整合,引领 Web3 AI+AR 风潮

加密市场一直是科技创新的前沿阵地。虚拟现实&#xff08;VR&#xff09;技术和人工智能&#xff08;AI&#xff09;被认为是引领未来的重要技术之一&#xff0c;Web3 自然不会缺席这场足以改变人们生活方式的变革&#xff01; 2月份&#xff0c;Apple Vision Pro 的发售迅速引…

Python爬虫网络实践:去哪儿旅游数据爬取指南

Python爬虫网络实践&#xff1a;去哪儿旅游数据爬取指南 在这个博客中&#xff0c;我们将探索如何使用 Python 来进行网络数据抓取&#xff0c;并以抓取旅游数据为例进行演示。我们将通过一个简单的示例来说明如何利用 Python 中的常用库进行网页抓取&#xff0c;从而获取旅游…

快速理解JS中的原型和原型链

快速理解JS中的原型和原型链 在我们学习JS的过程中&#xff0c;我们总会接触到一些词&#xff1a;“原型”&#xff0c;“原型链”。那么今天我就来带大家来学习学习原型和原型链的知识吧&#xff01; 在开始之前&#xff0c;我们明确一下我们接下来想要学习的目标&#xff1a…

新型[datahelper@onionmail.org].datah 勒索病毒来袭:如何筑起安全防线?

在数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒成为了一种非常严重的威胁。[datahelperonionmail.org].datah勒索病毒就是其中的佼佼者&#xff0c;它以其复杂的加密手段和恶劣的勒索行为&#xff0c;给用户带来了巨大的损失。本文将从病毒的运行机制、…

JS中的JSON(秒懂如何操作JSON)

目录 一、JSON介绍 1.概念 2.主要特点 3.优点 4.使用JSON的原因 使用 XML 使用 JSON 二、JSON语法 三、JSON使用 1.JSON的序列化 2.解析&#xff08;parse) JSON 3.序列化&#xff08;Stringify&#xff09;JSON 四、JSON实例 1.用户信息 2.本地存储 五、JSON应用…

C++计算器类成员的实现

请编程完成如下任务&#xff1a; 根据类的定义&#xff0c;完成该类成员函数的实现。 编写main()函数&#xff0c;分别以默认值和输入的值num创建对象c1和c2,调用成员函数对c1的数据成员增加1&#xff0c;c2的数据成员减少1&#xff0c;然后分别输出c1和c2的数据成员。 函数接…

mapbox 工作问题暂时记录

mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. mapbox样式修改 1. mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式 2. map.value.getStyle().layers这行代码可以获取页面中所有图层,可以判断图层id来做相应操作 3. map.value.setLayoutProperty(layer.id…

ModuleNotFoundError: No module named ‘mlxtend‘

from mlxtend.plotting import plot_decision_regions 报错信息: ModuleNotFoundError: No module named mlxtend Jupyter和Spyder报错原因&#xff1a;因为anaconda下没有这个模块&#xff0c;需要安装mlxtend 解决方案&#xff1a; 1.打开anaconda(或终端) 2. 点击路径点…

Python爬虫之Scrapy框架基础

Scrapy爬虫框架介绍 文档 英文文档中文文档 什么是scrapy 基于twisted搭建的异步爬虫框架. scrapy爬虫框架根据组件化设计理念和丰富的中间件, 使其成为了一个兼具高性能和高扩展的框架 scrapy提供的主要功能 具有优先级功能的调度器去重功能失败后的重试机制并发限制ip使用次…

完全可定制的富文本编辑器:逻辑清晰,插件赋能 | 开源日报 No.218

ianstormtaylor/slate Stars: 28.8k License: MIT slate 是一个完全可定制的框架&#xff0c;用于构建富文本编辑器。 可以构建类似 Medium、Dropbox Paper 或 Google Docs 的富文本编辑器通过一系列插件实现所有逻辑&#xff0c;避免代码复杂度受到 Draft.js、Prosemirror 和…

1.grpc-教程(golang版)

目录 一、介绍 二、环境准备 三、Golang中使用grpc 1.编写protobuf文件 2.服务端 3.客户端 四、proto文件详解 1.proto语法 2.数据类型 基本数据类型 数组类型 map类型 嵌套类型 编写风格 3.多服务 4.多个proto文件 五、流式传输 1.普通rpc 2.服务器流式 …