node基础入门

Vue与nodejs

Node.js是一个开源、跨平台的JS运行环境;
Vue是构建用户界面的渐进式框架，需要Node.js的支持;

在"https://nodejs.org/en/"Node.js官网中下载稳定版，具体下载操作可以看大佬的博客

node.js安装及环境配置超详细教程【Windows系统安装包方式】_node 0.12.6 安装 node-echarts 包-CSDN博客

下载完成后在终端中输入"node -v"可查看版本号,安装node.js的作用是为了获得包管理工具npm;

在终端输入"npm -v"可查看npm版本号。

在nodejs下载位置的包内创建node_cache和node_global两个文件夹;

将全局配置目录与缓存目录配置到刚才的文件夹上
npm config set prefix “你的安装目录\node_global”
npm config set cache “你的安装目录\node_cache”

这个时候使用npm list -global就会发现node_global不存在(因为已经在node内部修改了配置文件);

为了加快速度可以使用淘宝镜像，输入"npm config set registry=http://registry.npm.taobao.org

npm config list查看配置是否修改,修改的信息就在C盘的用户目录下的".npmrc"中，删除此文件恢复默认配置;

npm config get registry

检查镜像网站行不行;

npm介绍

npm原名为Node Package Manager
用于对node包的管理，由来是vue程序开发的lsaaz程序员，为了解决每次网站依赖代码需要到开发代码的对应官网如jQuery、BootStrap中下载文件到自己的网站源码中，用js写了npm作为工具将代码集中管理，(npm开发思路，买个服务器作为代码仓库registry，存放需要共享的代码，让大厂人员将代码使用npm publish提交到registry上，当别人需要使用时，就用npm install下载,这些被使用的代码被叫做包package）

yarn介绍

yarn：与npm相同都是包管理工具，由Facebook,Google,Exponent,Tilde共同研发的新的js包管理工具。优秀点为:
并行安装：同时执行多个任务;
离线模式：安装过的包，再次安装会从缓存中获取，npm会从网络下载;
版本锁定：默认存在yarn.lock文件锁定版本，保证环境统一，npm默认最新版会造成版本不兼容的问题；
更简洁的输出：安装时信息较少；

---

对于上述，为node的配置部分，在cmd进行，下文npm安装模板因为需要将模块安装到本地则需要使用管理员cmd来进行安装;

npm更新

因为node下载时自身携带了一个npm,但不是最新版的所以我们需要先用老版npm下载一个新版的npm代替老版；

npm install npm -g
npm install安装或更新命令，npm为模块名字，-g作为参数意思是安装到global全局目录下

再次使用npm -v检测版本发现npm版本更新；

使用npm list -global就可以查看global里的模块，因为此新npm安装在我们创建的新的全局目录下，但还不能安装其他的模块，因为npm在电脑中的系统变量未修改，还是安装node时默认的nodejs\node_modules，而不是nodejs\node_global\node_modules

在系统变量中添加一个NODE_PATH变量名，值为新全局配置的地址，D:\nodejs\node_global\node_modules

重启管理员cmd，使系统变量生效；

对于以下安装的模块在本地文件中可以找到全局目录下的模块目录内是否存在，再打开安装的模块文件夹观察是否有dist文件夹(distribution最终产品),此为我们需要的东西，没有则安装失败；

用npm安装vue.js
安装npm install vue -g

安装vue-router
npm install vue-router -g

安装vue/cli新版脚手架
cnpm install -g @vue/cli

脚手架用来开发vue大型项目，提供代码目录结构，项目结构的部署，热加载，代码单元测试等事情；

在管理员cmd中使用vue是无法查看vue的属性的，因为vue脚本并没有配置环境变量，还需要在path中添加一个D:\nodejs\node_global的值，如下图：D:\nodejs\为博客最初安装稳定版nodejs，系统自动添加的环境变量

即可查看vue脚手架版本

vue -V

创建一个vue项目
vue create vue_first

选择vue3；

cd vue_first
进入工程根目录

npm run serve
启动vue工程(如果没有安装cnpm则使用npm的命令)

打开显示的地址网站进入Vue CLI初始页面；

对于vue2，采用vue早期推出的一款脚手架vue-cli(vue-cli包名改成了@vue/cli)，使用webpack创建Vue项目。可以选择安装需要的各种插件，比如Vuex，VueRouter等，或者默认安装后，手动添加各种插件

vue-cli用于创建vue2的项目
@vue/cli用于创建vue3的项目，当然也支持vue2

vue-cli的创建项目过程如上，要先用包管理器安装脚手架，然后使用vue create demo创建项目；

create-vue是Vue3专用脚手架,使用vite创建Vue3项目，也可以安装需要的各种插件，使用更简单

npm init vue@latest；
or
yarn create vue；

可以使用vue3专用脚手架创建vue3项目，也可以使用vite脚手架创建
npm init vite@latest

运行程序为npm run dev;

对于小白来说两者无太大区别，本人是用vite脚手架与npm包管理工具来开发vue3项目的；

e3专用脚手架创建vue3项目，也可以使用vite脚手架创建
npm init vite@latest

运行程序为npm run dev;

对于小白来说两者无太大区别，本人是用vite脚手架与npm包管理工具来开发vue3项目的；