1、安装VS Code
(1)官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装即可。
(2)设置简体中文:Ctrl+Shift+P 或者 选择View >> Command Palette,然后输入Configure Display Language 选择zh-cn,如果没有zh-cn选项,则选择Install additional languages安装简体中文,然后选择zh-cn,重启vs code即可。
2、安装node.js
(1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.js安装完成之后会同步安装npm。
(2)配置环境变量:把node.js安装路径配置到环境变量Paht中,例如:D:\Personal Program\nodejs,使用node.js安装包安装时一般会自动添加环境变量。
(3)查看node.js是否安装成功:打开cmd,输入ndoe -v 和 npm -v 如果显示版本信息,则说明安装成功。
(4)设置npm全局插件和缓存路径,如果不设置则默认在C:\Users\huijuan\AppData\Roaming\npm 下
npm config set prefix D:\Program\nodejs\node_global 路径可根据自己存储位置修改
npm config set cache D:\Program\nodejs\node_cache 路径可根据自己存储位置修改
3、安装vue
(1)在vs code终端中执行:npm
install
-g vue-cli,出现如下界面表示vue安装完成。
如果提示:npm: 无法将“npm ”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。则表示未安装node.js,请根据第二部安装node.js即可。如果npm命令仍不能用,则重启VS Code即可。
(2)配置vue环境变量:如果设置了npm的全局路径,则vue一般会安装到此位置。例如:D:\Personal Program\nodejs\node_global,把该路径配置到环境变量Path中。
4、此时基本环境已经具备,接下来就是创建vue项目
(1)选择 文件 >> 打开文件夹 选择要创建项目的文件目录。
(2)在“终端”中输入:vue init webpack projectName,其中projectName可以自行修改。
在下面步骤中,一些需要填写或选择的选项,我都直接Enter了,一些需要安装的我都直接No了,各选项具体意思在此不做过多描述。如果创建vue项目时有报错信息,暂时不用管它,后面我们可以在重新安装更新。
(3)按照上图提示,cd 到刚才项目目录,但是暂时不要启动。需要重新初始化依赖,初始化依赖步骤为:
1)执行npm cache clean --force 清除缓存。
2)(可选)执行npm set registry https://registry.npmjs.org/,设置官网镜像路径。该步骤是可选操作,如果在执行3)时没有问题,该步骤可以不执行。如果执行3)时有错误,则从1)重新执行一遍。
3)执行npm install 重新初始化依赖。
(4)启动项目,执行npm run dev,启动成功后会提示访问路径。
(5)根据提示,访问http://localhost:8080,会访问到如下界面。至此,VS Code创建Vue.js项目已经完成。