1。在node . js官网https://nodejs.org/en/download/下载安装包。
2.下载后进行安装。
3.打开命令行,输入节点- v可以查看到版本号。输入npm - v可看到npm版本号。
新版的node . js已自带npm(类似。net中的nuget包管理器),安装node . js时会一起安装。(将来要更新npm可用这个命令npm安装npm@latest - g)
4。在我的win10系统中可以看到环境变量也已经自动配置好了。如下图
同时也可年看到npm包管理器的默认下载目录,如下图
5。在命令行输入节点回车,再输入console.log (“hello”);注意以英文分号结束,查看到输出结果就说明安装成功了。
6配置npm的全局模块的存放路径以及缓存的路径
(先要退出上一步已进入的节点,输入.exit或者按两次Ctrl + C就退出了节点)
在节点。js的安装目录(C: \ Program Files \ nodejs)下新建两个文件夹node_cache和node_global方便集中管理。(因为默认会将模块安装到【C: \ \用户用户名\ AppData \漫游\ npm】路径中,占C盘空间,所以下面两行的命令是修改模块保存的路径,自已想放哪都行,这里我就懒得放其它盘了)
然后在命令行输入
npm配置设置前缀“c: \ Program Files \ nodejs \ node_global” npm配置设置缓存“c: \ Program Files \ nodejs \ node_cache”
将来用npm安装XXX - g安装以后模块就在这两个文件夹里。
然后在C: \用户\[你的用户名]下用记事本打开.npmrc文件确定如下图所示就说明设置成功了。
7。配置npm的环境变量(因为上面修改了路径)
在系统中变路径新增一个变量C: \ Program Files \ nodejs \ node_global \ node_modules
然后在用户变量中修改变量为C: \ Program Files \ nodejs \ node_global
最后就可以删掉C: \ \ xlz \ AppData \漫游用户下的npm目录了。(这里得显示隐藏的项目才能看到AppData目录)
(注意:修改了环境变量后要重新打开命令行界面)
8..测式npm
安装个模块测试下,例如最常用的表达模块。
输入命令npm安装express - g
完成后在C: \ Program Files \ nodejs \ node_global \ node_modules目录下就可看到表达文件夹和它的文件了。
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。
1.下载安装cnpm并且使用淘宝的服务器做为的包源。
输入命令:npm安装- g cnpm——注册表=https://registry.npm.taobao.org注意注册前面是两个杠啊。
完成后输入cnpm - v可查看到相关信息。
完成后在C: \ Program Files \ nodejs \ node_global \ node_modules目录下可看到cnpm文件夹和它的文件了。如下图
还有在C: \ Program Files \ nodejs \ node_global可看到cnpm和cnpm.cmd两个文件。
<>强(js应用程序的静态模块打包器(模块打包机))强>
当webpack处理应用程序时,它会递归地构建一个依赖关系图(依赖图),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个包。
Vue的组件是.vue或.wxml等文件,无法被浏览器解析,需要被翻译和打包为。js文件
1.输入cnpm安装webpack - g安装。
完成后在C: \ Program Files \ nodejs \ node_global \ node_modules目录下可看到webpack文件夹和它的文件了,还有在C: \ Program Files \ nodejs \ node_global可看到webpack和webpack.cmd两个文件。
<>强(用来生成vue模版的工具)强>
vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器。