一、前言:所有安装必须网络连接正常!!!设置默认为谷歌浏览器
二、安装软件:
1.Node.js软件:node-v16.13.1-x64.msi文件,默认安装。
注意:使用默认路径
在此,选项一定要勾选!
安装成功后,继续安装其他相关工具,如果有启动项报警,先允许启动!
安装过程中,下图等待时间会稍长!不可关闭!!
“回车”退出!
系统会自动配置环境变量,只要在命令方式、且任一路径下键入“node -v”均可见node的版本信息提示,安装才成功!注意:在系统环境变量path中增加node安装的默认路径
如果卸载,需注意C:\ProgramData\chocolatey文件夹需手动删除!
- 安装nmp包:
命令行下键入“npm root -g”,“-g”代表全局安装
使用淘宝镜像代理
命令行下继续键入“npm install -g cnpm --registry=https://registry.npm.taobao.org”
2 、安装vue-cli3
命令行下键入“cnpm install -g @vue/cli”,会出现下图效果。
安装结束后,输入“vue -V”,注意V要大写!出现版本信息提示则成功!
继续输入命令“cnpm install -g @vue/cli-init”,以保征2.0与3.0版本皆可使用
继续输入命令“vue ui”,可通过浏览器启动vue-cli3图形界面,可不做处理!
VSCode安装:
使用VSCodeUserSetup-x64-1.62.3_2.exe默认安装
汉化。打开VSCode,使用“ctrl+shift+x”,打开扩展搜索,安装,即可安装汉化。但需要按下“Ctrl+Shift+P”组合键以显示“命令面板”,然后键入“display language”以选择中文
安装HTML文件的插件。使用“ctrl+shift+x”,打开扩展搜索,查找view in browser,安装。注意选择“信任且安装” 。安装完成后,可以对html文件利用右键菜单“view in browser”,通过默认浏览器进行预览
安装“Code Runner”插件。使用“ctrl+shift+x”,打开扩展搜索,查找Code Runner,安装。注意选择“信任且安装” 。安装完成后,可支持JSP及多门语言运行
3.使用测试:
在桌面或任一位置创建一个文件夹,通过命令行进入到该文件夹下,如C:\Users\HJ\Desktop\X,输入命令"vue create test1"
打开VSCode,通过“文件|打开文件夹”,打开C:\Users\HJ\Desktop\X\test1。使用快捷键“ctrl+J”,打开终端,输入“cnpm run serve”,运行后效果如图示。可使用crtl键单击链接,出现浏览器页面效果即可
查看Node版本:node -v
查看vue.js版本:npm info vue
查看vue-cli版本:vue -V