zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue项目Mac 环境 搭建 新建 webstorm
2023-09-27 14:25:57 时间
安装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了。




vue 不同环境的baseurl配置 1.不管讲多少遍,对这个不同的环境中 baseURL的配置还是很懵 2.今天在单独开篇文章写下吧 3.vue-cli 模式环境变量 官方说明 4.process 说明 5.最新脚手架 vue/clie 4x