mac上搭建vue环境及webstorm新建vue项目

安装nodejs和npm

这个就不细说了,网上有很多相关资料。

注意,如果npm版本低可能不行,升级npm使用命令:

sudo npm install -g npm

查看npm版本使用命令

npm -v

安装淘宝镜像

安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

验证命令:cnpm -v

安装webpack

可能需要提前安装webpack-cli npm install webpack-cli -g

安装webpack npm install webpack -g

验证 webpack -v

注意:webpack依赖webpack-cli,但是webpack-cli并不会自动安装,所以需要我们手动安装。

如果未安装,当执行命令webpack -v会提示是否安装,直接yes安装即可。应该也可以提前先安装完再安装webpack

安装vue

安装语句为:npm install --global vue-cli

验证命令:vue -V (注意V要大写)

新建vue项目

打开webstorm(要高版本,至少2017版本及以下没有),依次点击new project -> vuejs,然后输入项目名称,一路next即可。

打开项目后等待build完成,可以看到运行栏出现npm start,点击run即可运行项目。

如果点击run出错如下:

[webpack-dev-server: command not found]

在终端中,在项目目录下执行cnpm install,然后执行npm run dev就运行起来了,这时候打开http://localhost:8081就可以看到了。

然后下次运行就可以直接run了。
在这里插入图片描述


版权声明:本文为chzphoenix原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。