Vue2创建过程记录

news2025/11/11 19:04:38

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

文章目录

  • 一、搭建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.coloradmin.cn/o/1584886.html

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

相关文章

2024年安卓轮播图代码+定时翻页(全网代码最少实现)

2024年安卓轮播图代码定时翻页 asda 这里是Fragment子类的继承如果使用 AppCompatActivity请修改一下很简单的如果又看不懂的话可以访问使用我的gpt&#xff1a;https://0.00000.work/ 免费3.5的 直接吧代码扔给他然后和他说帮忙解释一下每一行作用 Integer[] data{R.drawab…

Nexpose v6.6.245 for Linux Windows - 漏洞扫描

Nexpose v6.6.245 for Linux & Windows - 漏洞扫描 Rapid7 Vulnerability Management, Release Apr 03, 2024 请访问原文链接&#xff1a;Nexpose v6.6.245 for Linux & Windows - 漏洞扫描&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&…

JVM字节码与类的加载——class文件结构

文章目录 1、概述1.1、class文件的跨平台性1.2、编译器分类1.3、透过字节码指令看代码细节 2、虚拟机的基石&#xff1a;class文件2.1、字节码指令2.2、解读字节码方式 3、class文件结构3.1、魔数&#xff1a;class文件的标识3.2、class文件版本号3.3、常量池&#xff1a;存放所…

Vue笔记 2

数据代理 数据代理&#xff1a;通过一个对象代理对另一个对象中属性的操作&#xff08;读/写&#xff09; let obj{x:100} let obj2{y:200} Object.defineProperty(obj2,x,{get(){return obj.x},set(value){obj.x value} })Vue中的数据代理 Vue中的数据代理&#xff1a; 通…

cesium 添加动态波纹效果 圆形扩散效果 波纹材质

一、扩展材质 /*** 水波纹扩散材质* param {*} options* param {String} options.color 颜色* param {Number} options.duration 持续时间 毫秒* param {Number} options.count 波浪数量* param {Number} options.gradient 渐变曲率*/function CircleWaveMaterialProperty(opt…

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-回铃音补偿

文章目录 前言联系我们解决问题操作步骤 前言 回铃音&#xff1a; 当别人打电话给你时&#xff0c;你的电话响铃了&#xff0c;而他听到的声音叫做回铃音。回铃音是被叫方向主叫方传送&#xff0c;也是彩铃功能的基础。我们平时打电话听到的“嘟 嘟 嘟 嘟”的声音&#xff0c;就…

Golang | Leetcode Golang题解之第20题有效的括号

题目&#xff1a; 题解&#xff1a; func isValid(s string) bool {n : len(s)if n % 2 1 {return false}pairs : map[byte]byte{): (,]: [,}: {,}stack : []byte{}for i : 0; i < n; i {if pairs[s[i]] > 0 {if len(stack) 0 || stack[len(stack)-1] ! pairs[s[i]] {…

白盒测试-条件覆盖

​ 条件覆盖是指运行代码进行测试时&#xff0c;程序中所有判断语句中的条件取值为真值为假的情况都被覆盖到&#xff0c;即每个判断语句的所有条件取真值和假值的情况都至少被经历过一次。 ​ 条件覆盖率的计算方法为&#xff1a;测试时覆盖到的条件语句真、假情况的总数 / 程…

期货学习笔记-MACD指标学习2

MACD底背离把握买入多单的技巧 底背离的概念及特征 底背离指的是MACD指标与价格低点之间的对比关系&#xff0c;这里需要明白的是MACD指标的涨跌动能和价格形态衰竭形态之间的关系&#xff0c;如果市场价格创新低而出现衰竭形态同时也有底背离形态的出现&#xff0c;此时下跌…

2024认证杯数学建模A题思路模型代码

目录 2024认证杯数学建模A题思路模型代码&#xff1a;4.11开赛后第一时间更更新&#xff0c;获取见文末名片 2023年认证杯数学建模 2024年认证杯思路代码获取见此 2024认证杯数学建模A题思路模型代码&#xff1a;4.11开赛后第一时间更更新&#xff0c;获取见文末名片 2023年认…

关于AI发展的3种声音:杨植麟 朱啸虎 王小川

1、杨植麟&#xff1a;技术信仰派 2、朱啸虎&#xff1a;市场信仰派 3、王小川&#xff1a;中间派 References 对话月之暗面杨植麟&#xff1a;向延绵而未知的雪山前进朱啸虎讲了一个中国现实主义AIGC故事王小川想提出中国AGI第三种可能性

【C 数据结构】线性表

文章目录 【 1. 线性表 】【 2. 顺序存储结构、链式存储结构 】【 3. 前驱、后继 】 【 1. 线性表 】 线性表&#xff0c;全名为线性存储结构&#xff0c;线性表结构存储的数据往往是可以依次排列的&#xff08;不考虑数值大小顺序&#xff09;。 例如&#xff0c;存储类似 {1…

Golang快速入门教程(一)

目录 一、环境搭建 1.windows安装 2.linux安装 3.开发工具 二、变量定义与输入输出 1.变量定义 2.全局变量与局部变量 3.定义多个变量 4.常量定义 5.命名规范 6.输出 7.输入 三、基本数据类型 1.整数型 2.浮点型 3.字符型 4.字符串类型 转义字符 多行字符…

RN使用蓝牙扫描

我项目需要用到蓝牙模块,蓝牙扫描到设备并且获取到电量显示到页面上,因此我做了如下demo,使用了react-native-ble-plx这个插件 点击进入官方文档官方文档 1.安卓环境配置(ios暂定,还没做ios,不过下面的方法是兼容的,自行配置ios权限) android/app/src/main/AndroidManifest.xml…

API管理平台:你用的到底是哪个?

Apifox是不开源的&#xff0c;在github的项目只是readme文件&#xff0c;私有化需要付费。当然saas版目前是免费使用的。 一、Swagger 为了让Swagger界面更加美观&#xff0c;有一些项目可以帮助你实现这一目标。以下是一些流行的项目&#xff0c;它们提供了增强的UI和额外的功…

代码签名证书:确保软件安全与可信性的关键工具

在数字化时代&#xff0c;软件已成为各行各业的核心驱动力。然而&#xff0c;随着网络威胁日益复杂&#xff0c;用户对于软件来源的可靠性、内容的完整性和发布者的可信度提出了更高要求。为满足这一需求&#xff0c;代码签名证书应运而生&#xff0c;它通过先进的加密技术&…

【SpringBoot】-- mapstruct进行类型转换时Converter实现类不能自动生成代码问题解决

问题描述 我的问题如下&#xff1a; 应该在红色区域生成对应的转换细节&#xff0c;但是这里只返回了一个空对象 问题解决 加入lombok-mapstruct-binding依赖,也要注意依赖引用顺序问题 <dependency><groupId>org.projectlombok</groupId><artifactId&…

【智能优化算法详解】粒子群算法PSO量子粒子群算法QPSO

1.粒子群算法PSO 博主言简意赅总结-算法思想&#xff1a;大方向下个体自学习探索群体交流共享 对比适应度找到最优点 背景 粒子群算法&#xff0c;也称粒子群优化算法或鸟群觅食算法&#xff08;Particle Swarm Optimization&#xff09;&#xff0c; 缩写为 PSO。粒子群…

小白部署springboot+vue网站到服务器踩坑总结【维护更新篇】

目录 前言如何更新前端nginx安装和启动言归正传&#xff0c;更新前端 如何更新后端杀死进程 前言 在上一篇文章里详细介绍了怎样部署一个前后端分离的网站&#xff0c;链接: 链接在此 但是部署完之后&#xff0c;在本地的开发更新后&#xff0c;重新上传到服务器上又遇到了一些…

mybatis(5)参数处理+语句查询

参数处理&#xff0b;语句查询 1、简单单个参数2、Map参数3、实体类参数4、多参数5、Param注解6、语句查询6.1 返回一个实体类对象6.2 返回多个实体类对象 List<>6.3 返回一个Map对象6.4 返回多个Map对象 List<Map>6.5 返回一个大Map6.6 结果映射6.6.1 使用resultM…