今天实习第三天,vue(vue-cli部分,webpack部分,vue-router部分,elementUI部分)

news2024/11/28 17:45:07

01.创建第一个vue-cli。这里用的是node.js。早上的时候,就需要把node.js安装上去
02.node.js安装
第一步.去官网下载node.js
https://nodejs.org/en
在这里插入图片描述

第二步.运行官网下载的node.js的msi文件(记住所有的node.js文件的安装包都是msi文件的形式),一直都是next。最后检查是否安装成功,使用windows+r 打开cmd 运行末班,输入命令 node -s和 npm- v,如果出现结果的话,代表安装成功。
在这里插入图片描述

第三步.安装完成后,配置node.js
01.
安装淘宝的加速器 ,命令就是
npm install cnpm -g
在这里插入图片描述
02.配置vue-cli,也是输入命令行:

npm install -g @vue/cli

03.在D盘中,去new 一个新的文件夹,叫做vue_projects 在路径上打开cmd,输入命令

vue init  webpack myvue

在这里插入图片描述
因为需要学习相关的组件,所以选择no。

04.运行项目

cd myvue
npm install
npm run dev

在这里插入图片描述

“npm install” 是 Node Package Manager (npm) 的一个命令,用于在项目中安装所需的依赖包。它会读取项目目录中的 “package.json” 文件,并从 npm registry 下载定义的依赖包。在项目中使用依赖包的代码之前,通常需要先运行 “npm install” 命令。
————————————————
版权声明:本文为CSDN博主「Pella732」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42596246/article/details/129586384

在npm run dev的时候,首先会去项目的package.json文件里找scripts 里找对应的 dev ,然后执行 dev 的命令。
在这里插入图片描述
在这里插入图片描述
05.修复项目

npm audit fix

06.在idea打开
file----open
在这里插入图片描述
在这里插入图片描述


webpack
01.介绍webpack
在这里插入图片描述

02.安装,相关的命令在cmd中去运行

npm install webpack -g
npm install webpack-cli -g

在这里插入图片描述
在这里插入图片描述

03.创建项目,在项目中去用相关的功能
第一步:创建一个空项目,在vue-projects(我创建的vue项目的工作目录),创建一个webpack-study文件夹

第二步.打开idea。在file–>open中去打开这个文件夹(名字是那个刚刚创建的文件夹,也就是webpack-study)

第三步.在idea中去创建一个modules的目录(directory),写两个js文件,一个叫做hello.js,一个叫做main.js


hello.js
在这里插入图片描述

exports.sayHi=function(){
      document.write("<div>hello webpack </div>");
};

注解:exports关键字

module.exports 和 exports 是 Node.js 中的两个关键字,用于导出模块。

module.exports 是一个对象,可以用来导出模块中的多个函数、变量等。

exports 是 module.exports 的一个快捷方式,可以直接导出单个函数或变量。

例如:
在这里插入图片描述


main.js
在这里插入图片描述

var hello =require("./hello");
hello.sayHi();

这个对象hello是接收hello.js。这个对象可以直接调用hello.js声明的方法

注解:

JavaScript中的require是一个函数,用于在Node.js环境中加载模块。它接受一个模块路径作为参数,并返回该模块的导出对象。在浏览器中,require通常不可用,需要使用其他工具来实现模块加载。


第四步.配置webpack.config.js文件
创建一个js文件:
在这里插入图片描述
其中的代码是:
在这里插入图片描述
entry是入口
output是打包结果放在/js/bundle.js文件中

目录结构是:
在这里插入图片描述
第五步.打包
在控制台中输入webpack命令
在这里插入图片描述
在这里插入图片描述

第六步.idea自动生成dist目录
在这里插入图片描述
第七步.创建index.html
在这里插入图片描述
其中的代码:

在这里插入图片描述


vue-router部分
01.先创建相关的项目
在这里插入图片描述

vue init webpack hello-vue

注解:
用vue init命令来初始化项目,具体使用方法如下:

vue init <template-name> <project-name>

init:表示要用vue-cli来初始化项目

<template-name>:表示模板名称,vue-cli官方提供的5种模板:

1.webpack:一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
在这里插入图片描述

<project-name>:标识项目名称,用户根据自己的项目来起名字。

02.安装相关的插件
在这里插入图片描述

cd hello -vue
npm install vue-router --save-dev
npm i element-ui -s
npm install
cnpm install sass-loader node-sass --save-dev
npm run dev

相关的组件,在elementUI官网可以看到。https://element.eleme.io/

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

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

相关文章

(学习笔记-TCP连接建立)IP层会分片,为什么TCP层还需要MSS呢?

前提知识&#xff1a; 网络层最常用的是IP协议&#xff0c;IP协议会将传输层的报文作为数据部分&#xff0c;再加上IP包头组装成IP报文&#xff0c;如果IP报文大小超过了MTU(1500字节)就会再次分片&#xff0c;得到一个即将发送到网络的IP报文 MTU和MSS: MTU&#xff1a;一个网…

如何在 Excel 中快速生成随机密码?

有时&#xff0c;我们可能想创建随机密码来保护某些重要内容。 但是&#xff0c;您有什么技巧可以在Excel中快速生成随机密码&#xff1f; 在这里&#xff0c;我有一些可以在Excel工作表中处理的方法。 用公式生成随机密码 使用插入随机数据生成随机密码​编辑 用公式生成随机…

普通人的姓名可以注册为商标吗?

商标是商品的生产者、经营者在其生产、制造、加工或者经销的商品上或者服务使用的标志&#xff0c;用于区别商品或服务来源。商标由文字、图形、字母、数字、三维标志、颜色组合和声音等组合而成&#xff0c;以姓名注册商标属于文字商标&#xff0c;因此&#xff0c;个人的名字…

第十二章:MULTI-SCALE CONTEXT AGGREGATION BY DILATED CONVOLUTIONS——通过膨胀卷积的多尺度上下文聚合

0.摘要 目前用于语义分割的先进模型是基于最初设计用于图像分类的卷积网络的改进。然而&#xff0c;像语义分割这样的密集预测问题在结构上与图像分类不同。在这项工作中&#xff0c;我们开发了一个专门为密集预测设计的新的卷积网络模块。所提出的模块使用膨胀卷积来系统地聚合…

QQ号码3个月未登陆真的要回收?

7月17日消息&#xff0c;微信号长期未使用会被回收的消息引起热议。 腾讯微信团队微博发文称&#xff1a;为保障用户的微信账号安全&#xff0c;注册后不活跃&#xff0c;长期未登录&#xff0c;并且没有零钱的微信账号&#xff0c;会被系统注销&#xff0c;无法使用。 不过也有…

B. The BOSS Can Count Pairs

Problem - 1830B - Codeforces 思路&#xff1a;因为ai*ajbibj&#xff0c;bibj<2*n&#xff0c;那么会有ai*aj<2*n&#xff0c;那么会有min(ai,aj)<sqrt(2*n)&#xff0c;我们能够发现我们只要枚举ai&#xff08;假设ai<aj&#xff09;那么只要在这种情况下求得所…

Kubernetes(K8s)常用命令大全:熟练编排更完美

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

提升效率,打通万里牛ERP与下游用友U8财务软件的无缝对接

一、对接流程 1.1 销售/售后流程 在万里牛订单出库后&#xff0c;通过轻易云数据集成平台将数据推送至用友U8销售订单和销售出库单&#xff0c;这些单据可以进行关联操作。 当万里牛售后单完成退货入库后&#xff0c;通过数据集成平台将数据推送至用友U8销售退货单和红字销售…

基于SpringBoot+vue的点餐平台网站设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

编程导航算法通关村第 1关 | 单链表的操作

编程导航算法通关村第 1关 | 链表的操作 文章目录 编程导航算法通关村第 1关 | 链表的操作单链表链表的定义初始化链表的遍历获取链表的长度链表的插入链表的节点的删除 双向链表节点的定义双向链表的定义节点的打印获取长度头部插入元素尾部插入元素链表的删除 单链表 链表的…

InnoDB锁内存结构

假如说 我们SELECT * FROM table WHERE a < 10000 FOR UPDATE 那岂不是要加几万条锁 这消耗老鼻子内存了 这些锁有很多地方都是一样的啊 能不能通过某种方式整理整理节省点内存呢? 答案是能 如果符合下边这些条件&#xff1a; 在同一个事务中进行加锁操作 被加锁的记录…

Redis远程字典服务

目录 前言 1.NoSQL 1.1NOSQL和关系型数据库比较 1.2非关系型数据库的优势 1.3关系型数据库的优势 ​编辑 2.主流的NOSQL产品 键值(Key-Value)存储数据库 列存储数据库 文档型数据库 图形(Graph)数据库 3.Redis简介 redis的应用场景 4.命令操作 4.1字符串类型 s…

python根据excel数据,基于散点图绘制棋盘图

文章目录 一、需求二、处理方式三、代码实现 一、需求 根据可视化的需要&#xff0c;下图的数据需要使用棋盘图的样式来展示&#xff0c; 原始数据&#xff1a; 最终效果图&#xff1a; 二、处理方式 1、先将DataFrame数据转换为Numpy数组&#xff1b; 2、先使用np.transp…

Window下Mysql5.x和8.x版本切换

在最近的工作中需要使用Mysql5.x版本&#xff0c;但以前的自己项目开发使用的Mysql版本都是8.x。因此特意去查资料看了一下&#xff0c;下边是如何在window下实现两个不同版本Mysql的切换。 既然是不同的Mysql&#xff0c;所以我们需要去下载自己需要的Mysql版本安装即可。&…

立思辰打印机IP连接和USB连接

打印机是常用办公设备,很多家庭也都用着这个,立思辰3032是一个比较老的型号,属于国产打印机,基本功能都有,下边分享一下安装经验: 1.驱动: 不管是连USB还是IP地址,都需要先给电脑装上打印机驱动,只有装上驱动,系统才能够识别打印机,并帮助用户传输文件。一般来讲,立…

Jenkins动态化阶段步骤

Jenkins中如何去根据入参动态化阶段步骤呢&#xff1f; Groovy语言基础 定义一个列表变量 def list []定义一个map的kv结构变量 def map [:]如何可以动态化阶段步骤 动态化步骤&#xff1a;其实就是&#xff0c;在jenkins pipeline中根据入参或者其他变量列表&#xff0c;动…

进阶高级Python开发工程师,不得不掌握的Python高并发编程(文末送书5本)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Vue 项目路由、自定义指令、api方法自动引入资源(require.context使用)

前端项目&#xff08;当前我以Vue项目为例&#xff09;当我们把api挂载在main上后 // 将api挂载到vue的原型上 import api from /api Vue.prototype.$apiapi在src下会有一个api文件夹&#xff0c;结构如下&#xff1a; 通常情况下&#xff0c;api文件夹的index.js文件我们通常…

Morris遍历--验证二叉搜索树(java)

Morris遍历- 验证二叉搜索树题目描述Morris 遍历解题代码演示&#xff1a; morris 遍历改写后序遍历 验证二叉搜索树 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/validate-binary-search-tree 题目描述 给你一个二叉…

git同步推送代码至gitee和阿里云效

背景 已有阿里云效的代码库&#xff0c;想迁移gitee却迁移不了&#xff0c;只能把代码先拉取下来&#xff0c;然后重新建库&#xff0c;配置过后&#xff0c;采用同步推送的方式&#xff0c;同步两个库的代码。 步骤一 新建名称相同的库 在gitee上新建库 在阿里云效上新建库 …