一、安装node.js
1、为什么要安装node.js
安装Vue的前置条件是安装node.js。
脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色。而对于需要独立运行的JS,nodejs就是一个解析器。
每一种解析器都是一个运行环境,不但允许js定义各种数据结构,进行各种计算,还允许js使用允许环境提供的内置对象和方法做一些事情。如运行在浏览器中的js的用途是操作DOM,浏览器就提供了document之类的内置对象。而运行在nodejs中的js的用途是操作磁盘文件或搭建http服务器,nodejs就相应提供了fs,http等内置对象。
2、安装步骤
2.1、下载node-v8.11.1-x64.msi
下载地址:nodejs官网。
2.2、安装node-v8.11.1-x64.msi
- 双击node-v8.11.1-x64.msi,点击Next、显示Node.js的许可协议页面:
2.3、勾选同意许可协议
- 勾选“I accept the terms in the License
Agreement”同意许可协议,并单击Next下一步,出现如下界面:
2.4、修改安装路径
- Node.js默认安装路径为“C:\Program
Files\nodejs\”,可以修改,在这里我改到了D盘,单击Next,出现安装模式及模块选择界面:
2.5、添加到环境变量
- 这里我直接(点击Add to PATH)Next下一步,准备就绪,准备安装:
2.6、安装
-
确认无误后,点击Install,开始安装:
-
半分钟后,安装完成,点击Finish即可:
2.7、配置环境变量
默认,Node.js安装完毕,会自动在系统的path环境变量中配置了node.exe的目录路径;但是可能你安装完成后,dos命令下输入node提示错误(需配置环境)。
2.8、查看node版本
- 检测是否安装成功:点击开始-运行-cmd(win+R),打开dos,输入“node --version”检查Node.js版本:
2.9、配置npm的全局模块的存放路径、cache的路径
在“命令提示符”窗口中执行命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
2.10、查看查看npm全局配置
在“命令提示符”窗口中执行命令:
npm config get
2.11、查看当前npm全局配置具体值
如果你只想查看某个键对应的值,可以在命令后添加键名,如:
npm config get registry
二、安装脚手架
1、为什么要安装脚手架
- vue脚手架用于自动生成vue和webpack的项目模板;
- vue脚手架是一个快速构建vue项目的工具,可以自动安装vue所需要的插件,避免手动安装各种插件,以及寻找各种cdn并一个个引入的麻烦。
2、安装步骤
2.1、全局安装
打开“命令提示符”窗口,在需要创建脚手架的目录输入:
npm install -g @vue/cli
等待几分钟,执行有点慢。
出现版本号表示脚手架已经创建成功!
2.2、兼容2.0(支持npm run dev等命令)
打开“命令提示符”窗口,输入:
npm i -g @vue/cli-init
出现如下页面表示已经执行成功!
2.3、配置环境变量
- 安装以上两个之后,配置vue的环境变量,找到vue.cmd的目录所在(如果忘记了安装在哪里,可以全盘搜索),复制路径,在path中新增环境变量,如下图:
- 在命令提示符中输入:vue --version 或 vue -V 查看当前版本。如下
提示错误:SyntaxError: Unexpected token { at createScript…
解决办法:安装最新的node.js,具体步骤见上面!!!
- 显示版本号则表示安装成功!
2.4、卸载脚手架
打开“命令提示符”窗口,输入:
npm uninstall @vue/cli -g
三、安装webpack
1、为什么要安装webpack
WebPack可以看做是模块打包机:它做的事情是,分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
2、安装步骤
2.1、全局安装
在命令行窗口,执行如下命令:
npm install -g webpack
npm webpack webpack-cli -D
npm install -D webpack webpack-cli
2.2、指定目录安装
在命令行窗口,执行如下命令:
npm install --save-dev webpack-cli -g
出现下图表示安装成功。
2.3、查看版本
在命令行窗口,执行如下命令:
webpack --version
当出现CLI for webpack must be installed时,输入yes,如下表示安装成功。
四、安装visual studio
1、为什么要安装visual studio
Visual Studio是微软公司开发的一款强大的集成开发环境(IDE),它可以帮助开发人员进行各种编程任务,包括设计、开发、测试、调试和部署应用程序。
2、安装步骤
- 访问官网visualstudio官网,下载文件。
- 双击文件安装软件,点击下一步。
- 选择目标位置
- 创建桌面快捷方式,添加到PATH
- 安装并启动。
五、新建vue项目
1、新建空文件夹
在电脑中创建一个空文件夹用于存放vue项目(在vue中,项目名不能带中文、大写字母、特殊符号,项目名可采用小写方式,以短横线分隔)
2、打开软件
打开visual studio code软件,点击File(文件)–>open Folder(打开文件夹)–>
选择新建的空文件夹,点击确定。
3、新建项目
点击ctrl+shift+~键,打开终端窗口,输入vue init webpack [项目名],点击enter键一键到底,等待下载(时间比较久)。
如出现错误vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREFUSED 127.0.0.1:443
或出现错误vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止
或出现错误Cannot find module 'D:\Program Files\nodejs\node_global\node_modules@vue\cli\bin\vue.js’见下方参考资料解决。
4、创建成功
出现如下页面说明创建项目成功了,左上角就出现了如下的项目结构,就可以开发vue项目了。
参考资料
NodeJS入门(一)—nodejs详细安装步骤
Vue脚手架安装
webpack安装使用教程
查看npm配置
报错1:vue-cli · Failed to download repo vuejs-templates/webpack-simple: read ECONNRESET
报错2:npm安装vue-cli报错internal/modules/cjs/loader.js(Error: Cannot find module ‘D:\Program\nodejs\node_global\node_modules\vue-cli\bin\vue’)
报错3:vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本”的解决方法