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

简介: 安装nodejs和npm 这个就不细说了,网上有很多相关资料。 注意,如果npm版本低可能不行,升级npm使用命令: sudo npm install -g npm 查看npm版本使用命令 npm -v
+关注继续查看

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



目录
相关文章
|
11天前
|
前端开发 JavaScript Linux
Centos7+Djaogo+Vue环境项目部署
Centos7+Djaogo+Vue环境项目部署
25 0
|
26天前
|
JavaScript 测试技术 开发工具
Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
之前练习了Vue一些基础的命令标签,在学习中在遇到一些基础知识我会继续向里面进行补充。
|
1月前
|
JavaScript
vue项目分环境进行打包
vue项目分环境进行打包
14 0
|
2月前
|
JavaScript
vscode引入新建得vue项目
vscode引入新建得vue项目
33 0
|
8月前
|
JavaScript 前端开发 测试技术
vue中怎么快速切换到各种环境,超级实用版
vue中怎么快速切换到各种环境,超级实用版
453 0
|
8月前
|
JavaScript 前端开发 应用服务中间件
vue不同环境使用axios跨域,前端解决方案
vue不同环境使用axios跨域,前端解决方案
427 0
|
8月前
|
移动开发 JavaScript iOS开发
【笔记】html图片映射usemap(vue环境下、map、area、coords)
html图片映射usemap(vue环境下、map、area、coords)
149 0
【笔记】html图片映射usemap(vue环境下、map、area、coords)
|
8月前
|
JavaScript
Mac环境,无法操作Vue的文件(权限问题)
Mac环境,无法操作Vue的文件(权限问题)
256 0
Mac环境,无法操作Vue的文件(权限问题)
|
9月前
|
缓存 JavaScript 前端开发
搭建一个干净整洁的vue前端开发环境
搭建一个干净整洁的vue前端开发环境
102 0
|
10月前
|
缓存 JavaScript
VUE新建一个项目
VUE新建一个项目
VUE新建一个项目
相关产品
云迁移中心
推荐文章
更多