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,一经查实,立即删除!

相关文章

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…

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;给用户带来了巨大的损失。本文将从病毒的运行机制、…

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.服务器流式 …

基于SVM的时间序列预测模型matlab代码

整理了基于SVM的时间序列预测模型matlab代码&#xff0c; 包含数据集。采用了四个评价指标R2、MAE、MBE、MAPE对模型的进行评价。SVM模型在数据集上表现非常好。 Mean squared error 0.000180613 (regression) Squared correlation coefficient 0.995639 (regression) Mea…

【进阶六】Python实现SDVRPTW常见求解算法——自适应大邻域算法(ALNS)

基于python语言&#xff0c;采用经典自适应大邻域算法&#xff08;ALNS&#xff09;对 带硬时间窗的需求拆分车辆路径规划问题&#xff08;SDVRPTW&#xff09; 进行求解。 目录 往期优质资源1. 适用场景2. 代码调整2.1 需求拆分2.2 需求拆分后的服务时长取值问题 3. 求解结果4…

信息收集-app,小程序,公众号,邮箱篇

*声明&#xff1a;*请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。合法渗透&#xff0c;本文章内容纯属虚构&#xff0c;如遇…

【linux】sudo 与 su/su -之间的区别

一、区别 二、其他 大概是因为使用 su 命令或直接以 root 用户身份登录有风险&#xff0c;所以&#xff0c;一些 Linux 发行版&#xff08;如 Ubuntu&#xff09;默认禁用 root 用户帐户。鼓励用户在需要 root 权限时使用 sudo 命令。 然而&#xff0c;您还是可以成功执行 su…

快速熟悉torchdiffeq用法,从数理逻辑到完整案例【第二、三部分】

本系列文章板块规划 提示&#xff1a;以下内容仅为个人学习感悟&#xff0c;无法保证完全的正确和权威&#xff0c;大家酌情食用谢谢。 第一部分 torchdiffeq背后的数理逻辑 第二部分 torchdiffeq的基本用法 第三部分 trochdiffeq的升级用法 第四部分 torchdifffeq的案例和代码…

Vue.js 过渡

过渡 Vue 在插入、更新或者移除 DOM 时&#xff0c;提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件&#xff0c;该组件用于包裹要实现过渡效果的组件。 语法格式&#xff1a; <transition name "nameoftransition"><div></div&…