vue前端开发-准备篇-环境搭建介绍前端NodeJsnpmvueCLI与后端框架对应关系
【1-1】
vue前端开发-准备篇-环境搭建&介绍前端NodeJs&npm&vueCLI与后端框架对应关系【1-1】
摘要
这篇⽂章核⼼主旨有两个，第⼀个介绍搭建前端项⽬安装的组件，第⼆个对安装的组件做个介绍。
如果只是搭建开发环境只看第⼀部分即可，如果想对组件有更多的认识就看完吧。
搭建前端开发环境
介绍前后端开发框架对应关系
1.环境搭建概述
在vue开发之前，先准备开发环境，安装node.js、vue3.0脚⼿架
2.安装与管理nodejs
2.1.Node.js介绍
1.什么是Node.js
简单的说 Node.js 就是运⾏在服务端的 JavaScript。
Node.js是⼀个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执⾏Javascript的速度⾮常快，性能⾮常好。
2.Node.js有什么⽤
浏览器的内核包括两部分核⼼：
DOM渲染引擎；
js解析器（js引擎）js运⾏在浏览器内核中的js引擎内部
Node.js是脱离浏览器环境运⾏的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）
NodeJs就好⽐java的JDK，后端java语⾔的运⾏需要jdk⾥⾯的jre来运⾏，前端的js运⾏就需要Nodejs。
2.1.下载nodejs
下载系统对应的安装包
下载下来的包直接执⾏下⼀步进⾏安装即可
2.2.验证安装结果
在cmd命令窗⼝输⼊下⾯的命令
# 查看版本号出现版本号即安装成功
node –v
npm –v
dejs版本管理介绍
在安装node后，如果想更新版本可以使⽤nvm命令来更新node的版本。
nodejs版本管理命令
#执⾏命令安装：npm install -g n
n latest  (升级node.js到最新版)
n stable（升级node.js到最新稳定版）
n 后⾯也可以跟随版本号，例如：$ n v0.10.26 或者 $ n 0.10.26
3.安装npm
3.1.NPM介绍
1.什么是NPM
NPM全称Node Package Manager，是Node.js包管理⼯具，是全球最⼤的模块⽣态系统，⾥⾯所有的模块都是开源免费的；也是Node.js 的包管理⼯具，相当于前端的Maven 。
2.安装NPM
在安装nodeJs时候都会默认安装npm，因此不需要单独安装。Node.js默认安装的npm包和⼯具的位置：Node.js⽬录
\node_modules
在这个⽬录下你可以看见 npm⽬录，npm本⾝就是被NPM包管理器管理的⼀个⼯具，说明 Node.js已经集成了npm⼯具
查看npm版本
#在命令提⽰符输⼊ npm -v 可查看当前npm版本
npm -v
3.解决npm访问慢
npm下载的资源在国外服务器，在下载资源时会⽐较慢，可以配置国内淘宝地址。
# 配置npm国内地址
npm config set registry registry.
#查看npm配置信息
npm config list
4.安装vue3.0 CLI
4.1.npm安装vue
# 卸载：如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要先卸载
npm uninstall vue-cli -g
# 安装vue3.0：
npm install -g @vue/cli
#查看版本号：
vue -V，出现版本号即安装成功。
3.0对2.0版本的桥接：如果希望同时使⽤3.0与2.0则执⾏下⾯的命令，否则不⽤执⾏。
npm install –g @vue/cli-init
5.NodeJs&npm&vueCLI与后端框架对应关系
5.1.前后端对应关系
java项⽬开发离不开三样组件，JDK运⾏java语⾔，maven管理项⽬依赖包，Springboot开发框架。
前端项⽬的开发其实和后端开发项⽬原理是⼀样的也有三样组件，NodeJs运⾏js语⾔，NPM管理js依赖包，vue就是项⽬开发的框架。
功能前端组件后端组件
运⾏环境组件NodeJs JDK
管理包依赖NPM Maven
功能前端组件后端组件
项⽬开发框架VUE SpringBoot
5.2.NodeJs功能演⽰
NodeJs和JDK运⾏语⾔的⽅法是⼀样的，在cmd命令界⾯输⼊node命令后⾯跟着js⽂件，就可以运⾏这个⽂件并将结果输出。
node 01-控制台程序.js
5.3.NPM功能演⽰
NPM和maven的功能是⼀样的，下⾯演⽰它是如何管理依赖包。
1.初始化⼀个项⽬（模块）
NPM初始化相当于使⽤maven创建模块的过程，需要输⼊项⽬名称，版本号等信息。初始化完成后会⽣成⼀个package.json这个⽂件和maven的l⽂件作⽤⼀样⽤来管理依赖的版本号。
#建⽴⼀个空⽂件夹，cmd窗⼝进⼊该⽂件夹执⾏命令初始化
npm init
#按照提⽰输⼊相关信息，如果是⽤默认值则直接回车即可。
#name：项⽬名称
#version：项⽬版本号
#description：项⽬描述
#entry point：项⽬的⼊⼝⽂件
#keywords:{Array}关键词，便于⽤户搜索到我们的项⽬
#最后会⽣成package.json⽂件，这个是包的配置⽂件，相当于maven的l
#我们之后也可以根据需要进⾏修改。
初始化完成后会在⽂件夹中⽣成⼀个package.json⽂件⽤来管理依赖包的版本号，该⽂件初始化内容就是项⽬的基本信息。
{
"name":"npm_test",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo \"Error: no test specified\" && exit 1"
},
"author":"",
"license":"ISC"
}
2.npm安装依赖
当我们初始化好⼀个项⽬后，下⾯介绍如何安装依赖包。当我们安装第⼀个依赖时，他会⾃动在项⽬的⽂件夹下新建⼀个node_modules⽂件夹管理所有下载到本地的依赖包，同时在package.json⽂件中记录所有依赖包的版本号，node_modules⽂件夹对应maven依赖包的本地仓库，package.json⽂件对应maven的l功能。
jquery框架原理
下⾯通过安装jquery依赖⽰例体验npm管理依赖和mavev的异曲同⼯之妙吧
#使⽤ npm install 安装依赖包的最新版，
#模块安装的位置：项⽬⽬录\node_modules
#安装会⾃动在项⽬⽬录下添加package-lock.json⽂件，这个⽂件帮助锁定安装包的版本
#同时package.json ⽂件中，依赖包会被添加到dependencies节点下，类似maven中的<dependencies> npm install jquery
#npm管理的项⽬在备份和传输的时候⼀般不携带node_modules⽂件夹
npm install #根据package.json中的配置下载依赖，初始化项⽬
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项⽬打包到⽣产环境的时候不包含的依赖
#使⽤-D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和⼯具的位置：⽤户⽬录\AppData\Roaming\npm\node_modules
#⼀些命令⾏⼯具常使⽤全局安装的⽅式
npm install -g webpack
3.npm常⽤命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。