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

Posted 2022-01-01 BennuCTech

安装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了。