npm注意事项(附带Vue-cli安装)

时间:2023-03-08 22:31:27
npm注意事项(附带Vue-cli安装)

下载完nodeJS后,可选择更改配置目录

1、npm config set prefix "D:\node\node-global"<!--配置全局安装目录-->
2、npm config set cache "D:\node\node-cache"<!--配置缓存目录-->

配置环境变量path添加 node.exe 的目录文件夹路径 和 D:\node\node-global (npm设置的全局安装的目录文件夹路径)

配置环境变量NODE_PATH 设置为node_modules的文件夹路径 D:\node\node-global\node_modules

设置npm国内镜像

npm config set registry http://registry.npmjs.vitecho.com

也可使用淘宝的npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

当然可以使用npm -v来进行版本查看
npm注意事项(附带Vue-cli安装)

下面演示用npm进行一个组件的安装,以nodeppt为例.

打开我们的node_global目录,所有安装的组件都是会放置在这(-g全局安装下)
npm注意事项(附带Vue-cli安装)
这里的nodeppt+nodeppt.cmd再加上module中的nodeppt,组成了完整的nodeppt组件
npm注意事项(附带Vue-cli安装)

截图中vue也是同理。

所以其实上文提到的cnpm其实也是跟vue或者nodeppt一样只是用npm下载的一个组件。

注意的是,下载都是需要管理员启动,当然linux(mac os)下只需要添加sudo,如 sudo npm install -g vue-cli

还有,若安装后,vue或者nodeppt本应该已经成为了node下的保留字,可以被识别,但如下
npm注意事项(附带Vue-cli安装)
这里由于我已经成功安装nodeppt,所以后面加个s意思下
则说明我们的nodeppt未成功安装,可以在node_global中查看是否存在.cmd文件。
npm注意事项(附带Vue-cli安装)

...
综上,这样看来,这有点像tomcat的作用,集中管理一堆应用。
可以试想,如果网不好的情况下,可以在别人那里拷贝node_global下的.cmd等两配套文件加上node_modules下的对应文件,就相当于用npm install了一遍

测试可行

今天安装vue,进行到vue init webpack myfirst-project,建立工程(建立的工程默认用webpack进行打包,这里目前我的认知是在vue-cli中内置了webpack支持)的时候,一直失败,后来发现原因是node版本太低,于是官网下载msi,直接安装即可。
npm注意事项(附带Vue-cli安装)
上图就是下文提到的vue webpack的package.json文件部分截图,可以看到不仅对node版本有要求对npm同样也是需要有对应支持

这里就可以长个心眼儿了,以后若是安装其他项目,可以先查询下所需node跟npm的最低版本要求,别像我一样,弄半天,一直出错。

vue-cli(npm install -g vue-cli)安装好后,cd到你需要建立工程的目录,新建一个工程project(vue init webpack my-project)
npm注意事项(附带Vue-cli安装)
还要下载依赖(项目中用到的其他库),上图中也有写到,三个步骤
cd my-project 定位到工程目录(如果一步步执行下来,上文建立工程的时候已经cd到了工程目录)

npm install安装依赖,这个命令可以执行是由于,定位到工程文件的前提下,目录下有一个package.json文件,里面配置了依赖所需

npm run dev启动这个工程
npm注意事项(附带Vue-cli安装)

完成依赖安装,可以看到多出一个目录
npm注意事项(附带Vue-cli安装)
里面就是各种第三方库
npm注意事项(附带Vue-cli安装)

最后,启动
npm注意事项(附带Vue-cli安装)
默认是8080端口

npm注意事项(附带Vue-cli安装)

端口号当然是可以修改的,找了半天,在这~
npm注意事项(附带Vue-cli安装)

ctrl+c退出当前进程(也是发现这些命令跟linux下都通用)
npm run dev重新启动,端口号就变为8050了(改了后)
npm注意事项(附带Vue-cli安装)

其实,截图中写很清楚,####node build/dev-server.js
读取这个配置文件,当然,里面又有“嵌套”,端口号最终是定义于如上图所示。

这里还有个小知识点提一下,使用webpack有个热加载功能,何谓热加载呢,就是改动代码后,不需要你进行页面手动刷新,自动同步。
npm注意事项(附带Vue-cli安装)

环境搭建完成,接下来就是用IDE来正式开始我们的VUE之旅了,这里我使用sublime作为IDE,安装完插件有高亮跟智能提示。
插件安装,下载sublime2或者3都可以,ctrl+shift+p打开我们的包搜索器,输入Package Control
npm注意事项(附带Vue-cli安装)
点第一个,继续输入Vue
npm注意事项(附带Vue-cli安装)
选择第二个,高亮
OK,现在我们的sublime操作.vue文件就是高亮且有智能提示的了~
npm注意事项(附带Vue-cli安装)

扩展点

建立的工程默认用webpack进行打包,这里目前我的认知是在vue-cli中内置了webpack支持
webpack在其中扮演的角色,本身是作为代码构建工具。
webpack有server插件,它实际上就是用Node.js创建了一个server。这也是为何上文直接使用npm run dev就能开启服务。
当然如果不用这个server插件,我们用其他的工具也应该能搭建一个node server,比如express,anywhere等。

webpack和webpack-dev-server的区别
第一:
webpack只是构建
webpack-dev-server除了构建,还提供web服务

第二:webpack.config.json的路径参数
显然,entry都一样,因为都要知道需要构建的文件在哪里
那么区别就在于 output了

path和webpack一起,指明构建 之后 输出文件的位置,这是真实的物理地址

publickPath和webpack-dev-server一起,当执行webpack-dev-server时,第一步首先跟webpack一样,先构建输出,然后提供web访问,该输出文件是在内存中
默认情况下,不设置publicPath则输出文件默认在运行webpack-dev-server的目录,也就是根目录,,那么html中引用直接是src="输出的文件",,如果设置了publicPath那么html中引用也要相对改变

总的来说,webpack只是构建,而webpack-dev-server相当于webpack+apache(或者其它web服务器)
区别在于
使用webpack+apache(或者其它服务器),每次构建之后,首先1 根据path引用构建后的输出文件;2 每次修改都要重新运行webpack

使用webpack-dev-server,运行之后首先1 先构建,输出文件在内存中,引用构建后的输出文件根据publicPath(默认是根目录);2 每次修改,自动刷新

记录的比较杂,步骤也是没认真整理过,主要是个人对于npm还不够熟悉,权当暂记。有疑问的可以留言