一、安装Node.js,搭建Vue环境
1、访问Node.js官网(https://nodejs.org/en/download/)进行安装包下载。
2、下载成功之后运行安装程序,进行安装。
如果是用安装程序进行安装,在安装过程中会自动进行Nodejs环境变量的配置,如果是通过其他方式进行安装,可能需要手动配置环境变量。
完成安装后,可以打开命令行,直接使用node命令,进入node.js交互模式。
然后可以输入console.log("Hello,World");测试安装。
3、新建D盘nodejs文件夹,同事创建global和cache子文件夹,设置npm的默认安装路径,和缓存路径:
执行npm set prefix "D:\nodejs\global"
执行npm set cache "D:\nodejs\cache"
在命令行中执行下列两个命令,进行安装。
npm install webpack -g
npm install vue-cli -g
将D:\nodejs\global加入Path环境变量。
输入vue测试是否安装成功。
二、创建vue测试项目
1、打开命令行,进入到希望创建vue测试项目的路径,然后在命令行中执行下列命令,进行项目创建。
D:
cd VueProjects
vue init webpack vue_test //其中vue_test为项目名称
按照提示完胜剩余三步,出现以下页面即表示安装成功。(此操作为非必须操作:在package.json目录下执行npm install.,在项目目录下执行npm install vue-router --save来安装路由。在项目目录下执行npm install vuex --save安装vuex。)
三、用webstorm打开项目
1、在WebStorm中设置项目的快速启动
在WebStorm右上角选择“Edit Configrations”,进入配置界面。
2、在配置界面中配置下图红框中的几个属性即可。
很多教程到这就结束了,但我要调试怎么办?难道还是需要打开一个终端?研究了WebStorm的Run/Debug,解决方案很简单,
就是Run->Edit Configurations... Add New Configuration,新建一个npm的Run/Debug