一、在使用之前,先了解三件东西是用来做什么的。
npm: Nodejs下的软件包管理器。
webpack:的主要用途是使用CommonJS语法来准备需要在所有浏览器端发布的静态资源,包括资源整合和打包。
Vue-cli:用户将生成vue工程模板。 (我会尽快开始vue的项目。 也就是说,设置包含基础依存库的vue的结构。 仅可通过npm install安装)
开始:
如图所示,下载8.9.3 LTS。 推荐给大多数用户。
双击安装
可以使用默认路径。 在本示例中,将更改为d:nodejs
一点Next
点完成
打开CMD,检查是否正常
让我们看看另外两个目录。 npm的本地仓库运行在系统盘c驱动器的用户目录中。 (之所以看不到npm-cache是因为没有使用。 使用缓存目录时生成。 )试图将这两个目录移动回d: ) nodejs。
创建两个目录,如下图所示
然后执行以下两个命令
npmconfigsetprefix ' d :nodejsnode _ global '
npmconfigsetcache ' d :nodejsnode _ cache '
如上图所示,关注npm的本地仓库,然后输入命令npm list -global
输入npmconfigsetregistry=http://registry.NPM.Taobao.org命令以配置镜像工作站
输入命令npm config list以显示所有配置信息,并注意单个配置文件
c :usersadministrator. NP MRC
使用文本编辑器编辑它,可以看到刚才的配置信息
检查镜像站是否不行,命令1
NPM配置获取注册表
检查镜像站是否不行,命令2
Npm info vue看看能否获得vue的信息
现在,请注意默认的模块D:nodejsnode_modules目录
将更改为d :nodejsnode _ globalnode _ modules目录。
直接运行npm install等命令将报告错误。
我们需要做一件事:
1、增加环境变量NODE_PATH的内容为d :nodejsnode _ global _ node _ modules
(以下操作需要重新打开CMD才能启用上述环境变量。)
一.测试NPM安装vue.js
命令: npm install vue -g
这里的-g是指安装在全局全局目录中
二.测试NPM安装vue-router
命令: npm install vue-router -g
运行npm install vue-cli -g安装vue脚手架
环境编辑path
向path环境变量中添加D:nodejsnode_global
对于windows10或更低版本,如果横向显示路径,添加到结尾时请注意不要有分号【; 】
重新打开CMD并测试vue是否正常使用
请注意,vue-cli工具内置了包含webpack和webpack-simple的模板。 前者是一个比较复杂和专业的项目。
他的配置并不全部位于根目录下的webpack.config.js中。
初始化,依赖安装
运行NPM安装依赖关系
npm run dev
成功的接口,提示打开地址http://localhost:8080
自动打开浏览器http://localhost:8080/#/
NPM运行构建
生成静态文件,并在dist文件夹下打开新生成的index.html文件
nmp下新创建的vue01目录说明: