一、安装Node.js
,搭建Vue
环境
1、访问Node.js
官网(https://nodejs.org/en/download/)进行安装包下载。
2、下载成功之后运行安装程序,进行安装。
如果是用安装程序进行安装,在安装过程中会自动进行Node.js
环境变量的配置,如果是通过其他方式进行安装,可能需要手动配置环境变量。
完成安装后,可以打开命令行,直接使用node
命令,进入node.js
交互模式。
然后可以输入console.log("Hello,World");
测试安装。
// 查看安装的Node.js的版本
C:\Users\Think>node -v
v8.9.4
3、设置npm
的默认安装路径和缓存路径
// 设置npm安装程序时的默认位置
npm config set prefix "D:\Program Files\nodejs\node_global"
// 设置npm安装程序时的缓存位置
npm config set cache "D:\Program Files\nodejs\node_cache"
然后再把D:\Program Files\nodejs\node_global\node_modules路径添加到环境变量PATH
中。
4、安装webpack
和vue-cli
脚手架
在命令行中执行下列两个命令,进行安装。
npm install webpack -g
npm install vue-cli -g
安装路径为D:\Program Files\nodejs\node_global\node_modules文件夹下。
二、创建vue测试项目
1、打开命令行,进入到希望创建vue
测试项目的路径,然后在命令行中执行下列命令,进行项目创建。
浏览器打开http://localhost:8080/#/
如下显示:
三、安装WebStom
此处掠过。
四、在WebStorm中打开vue项目
1、在WebStorm
中打开刚才创建的vue
测试项目,项目的js
文件可能会有编译异常。
可以通过在setting
文件中修改js
版本来解决。
2、在WebStorm
中设置项目的快速启动
在WebStorm
右上角选择“Edit Configrations
”,进入配置界面。
添加一个新的npm配置。
在配置界面中配置下图红框中的几个属性即可。