在使用之前,请掌握三件东西,了解它们是用来做什么的。npm: nodejs 下的包管理器。
webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要npm install 就可以安装。
2、nodejs下载网站: https://nodejs.org/en/【如果你不喜欢下载慢,可以下载其他网站上的东西。 别人有现成的东西,下载更快】
3、下载后,双击安装:
4、默认,下一步:
5、接受协议:
6、选择安装路径:
7、默认自行添加环境变量:
8、下一步进入" next ",最后点击finish
9、安装后,相应各文件的作用:
10、cmd打开终端:
11、检查是否正常
12、看看另外两个目录。 npm的本地仓库运行在系统盘c驱动器的用户目录中。 (之所以看不到npm-cache,是因为没有使用。 使用缓存目录时生成。 )试图将这两个目录移动回d: ) nodejs。
创建两个目录,如下图所示。
13、以下两个命令npmconfigsetprefix ' d :nodejsnode _ global ' npmconfigsetcache ' d 3360nodejsnode _ cache ' :
如上图所示,关注npm的本地仓库,然后输入命令npm list -global
14、配置镜像站,为了加快速度,输入命令npmconfigsetregistry=http://registry.NPM.Taobao.org配置镜像站
输入命令npm config list 显示所有配置信息,我们关注一个配置文件
C:UsersAdministrator.npmrc
使用文本编辑器编辑它,可以看到刚才的配置信息
检查一下镜像站行不行命令1
npm config get registry
检查一下镜像站行不行命令2
Npm info vue 看看能否获得vue的信息
在这种情况下,默认的模块D:nodejsnode_modules目录将更改为d :nodejsnode _ global _ node _ modules目录直接执行npm install等命令会报告错误。我们必须做一件事。 1、增加环境变量NODE_PATH的内容为d :nodejsnode _ globalnode _ modules
(注意,以下操作需要重新打开CMD才能启用上述环境变量: (一、测试NPM安装vue.js命令。 npm install vue -g这里的-g是指安装在全局全局目录中
二、测试NPM安装vue-router命令: NPM安装vue-router
运行npm install vue-cli -g安装vue脚手架
环境编辑path
在path环境变量中添加D:nodejsnode_global win10以下版本时,如果横向显示path,请使用分号【; 】
重新打开CMD并测试vue是否正常使用
请注意,vue-cli工具内置了包含webpack和webpack-simple的模板。 前者是一个相对复杂和专业的项目,并不位于根目录下的webpack.config.js中
初始化,依赖安装
运行NPM安装依赖关系
成功的接口,提示打开地址http://localhost:8080
自动打开浏览器http://localhost :8080//npmrunbuild生成静态文件,并在dist文件夹下打开新生成的index.html文件
nmp下新创建的vue01目录说明:
大部分参考了以下大神的:
33559 www.cn blogs.com/Li luxiang/p/9592003.html
按照大神的顺序操作了一次,没有大问题。 在此,我感谢地宣布,这篇文章只用于自己学习。