前提:nodejs已经安装成功nodejs安装
执行过程中如果有问题可以先参考文末第四点
1.安装配置脚手架vue-cli
脚手架可以帮助我们快速配置项目,打开vscode终端,输入如下命令
npm install -g vue-cli
2.创建vue项目
1.同样也是在vscode终端,输入vue init webpack ZJJJi,意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的,ZJJJi 是整个项目文件夹的名称,大家可自行更改。
2.重新初始化依赖
(1)按照上图的提示,cd 到刚才项目目录
(2)执行npm cache clean --force 清除缓存
(3)执行npm install 重新初始化依赖。
3.启动项目
(1) 打开项目里面的package.json,在vscode终端执行start中的命令npm run dev,启动成功后会出现访问地址。
(2) 根据提示,访问[localhost:8080],会访问到如下界面。至此,VS Code创建Vue.js项目已经完成。
4.注:碰到的问题
1.vscode终端执行命令提示没有权限
右击vscode 点击属性选择兼容性,勾选 “以管理员身份运行此程序” 确定即可
2.创建项目vue命令报错【vue : 无法加载文件】
执行get-ExecutionPolicy
如果返回结果如上图所示则执行set-ExecutionPolicy RemoteSigned
3.创建项目vue报超时
依此执行如下命令,查看vue、node、webpack是否安装
如上图所示
webpack没有安装,应该是下载这个package的时候,需要翻墙,导致出现连接超时。
改为离线创建,从github下载仓库中的vue-templates/webpack
地址:github.com/vuejs-templates/webpack
解压之后,需要更改目录名为webpack。放用户目录下的目录为.vue-templates
在执行创建命令的时候带上--offline,表示离线创建,如下
vue init webpack helloworld --offline
4.执行命令时报错找不到路径
npm ERR! enoent ENOENT: no such file or directory
如果遇到这种报错情况,那说明运行项目的时候没有到项目文件夹根目录下,这样应该先输入cd进项目文件夹