nodeJS环境搭建

最新推荐文章于 2022-09-24 22:34:29 发布

weixin_45457509

最新推荐文章于 2022-09-24 22:34:29 发布

阅读量68

点赞数

分类专栏： java 文章标签： nodeJS环境搭建

本文链接：https://blog.csdn.net/weixin_45457509/article/details/98481549

版权

java 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

ElementUI简介
名词说明：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Element-UI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件
demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 1. 导入css -->
		<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
		<!-- 2. 引入vue和vue-router-->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!-- 未使用vue路由功能可不导入 -->
		<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
		<!-- 3. 引入ElementUI组件 -->
		<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-button>默认按钮</el-button>
				<el-button type="primary">主要按钮</el-button>
				<el-button type="success">成功按钮</el-button>
				<el-button type="info">信息按钮</el-button>
				<el-button type="warning">警告按钮</el-button>
				<el-button type="danger">危险按钮</el-button>
			</el-row>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
		})
	</script>
</html>

ElementUI官网：http://element-cn.eleme.io/#/zh-CN 要用什么组键copy就行了
在这里插入图片描述

Node.js是什么
1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。
1.2 Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

注1：Node.js–>JavaScript运行环境，开发语言是：javascript
J2EE -->Java运行环境，开发语言是java
注2：Node.js v10.15.3文档地址：http://nodejs.cn/api/
2. npm是什么
npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

nodeJS环境搭建
1、下载nodeJS的安装包
下载官网：https://nodejs.org/zh-cn/download/
2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
在这里插入图片描述
3、配置环境变量
NODE_HOME:配置的是nodeJS解压的根路径E:\node-v10.15.3-win-x64
path:%NODE_HOME%;%NODE_HOME%\node_global

path

执行完上面的步骤后，我们打开cmd的黑框框，执行node -v，如果出现了版本号就证明装好了。
4、配置npm的全局模块的下载地址，在cmd里面执行下面的代码，一条一条的执行

配置npm全局模块路径和cache默认安装位置
npm config set cache "E:\node-v10.15.3-win-x64\node_cache"
设置淘宝源   修改npm镜像提高下载速度 
npm config set prefix "E:\node-v10.15.3-win-x64\node_global"

npm config set registry https://registry.npmjs.org/

我们在cmd里面执行npm -v出现版本号说明成功了，看下图

在这里插入图片描述

注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载
5、下载github的Vue的项目解压
将下载的项目解压到指定目录，本例是解压到：F:\vueproject，后面都以此为例

1. 打开命令窗口

cmd

2. 切换到d盘

3. 进入指定目录

cd F:\vueproject
6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）
这是刚解压的项目
在这里插入图片描述
进行依赖下载后的

里面就多了一个node_modules文件夹
7、在通过npm run dev 启动项目

运行效果如下

weixin_45457509

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nodeJS环境搭建

ElementUI简介名词说明：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Element-UI 一套为开发者、...
复制链接

扫一扫