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



目录
相关文章
|
17天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
40 5
|
17天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
71 3
|
17天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
36 6
|
3天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
|
4天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
6 0
|
4天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
6 0
|
5天前
|
缓存 JavaScript API
一些常见的Vue项目性能优化策略
Vue项目性能优化包括代码分割、懒加载以减少初次加载时间;利用计算属性和侦听器处理复杂逻辑;优化v-for,使用key属性;减少DOM操作;借助Vue Devtools分析性能;图片优化如使用WebP格式和懒加载;异步加载组件;精简第三方库和插件;考虑服务端渲染或预渲染;以及优化网络请求,如合并请求和利用缓存。实际应用中,需根据项目需求选择合适策略。
12 2
|
17天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
17 7
|
17天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
29 3