保姆级教程:WebStorm创建VUE项目

简介: 保姆级教程:WebStorm创建VUE项目

首先,编写Vue项目,需要编辑器,当然,普通的也可以,你用txt都可以。但是vue运行也是需要环境的。所以,第一步。安装node.js(这是一个服务器运行软件,为啥叫这个名字其实我也不知道。主要Node.js简介。简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。)可以点我去下载安装。

主要步骤可以参考以下链接步骤:Node.js安装及环境配置之Windows篇

安装完运行环境就可以安装我们编写软件的编辑器了就是我们今天的主角--WebStorm,为什么用这个呢,大家可以看看这个知乎的文章,各抒己见,看自己喜好吧。参考文章:为什么公司都不使用HBuilder?什么编辑器适合写Vue?

WebStorm下载安装就不用多说了吧,安装的时候一直点下一步就可以了。

先看怎么新建VUE项目。正常项目新建流程。

保姆级教程:WebStorm创建VUE项目(一)

然后选择vue.js

保姆级教程:WebStorm创建VUE项目(一)

然后这里记得项目名一定不要有大写,要不然就提示:Sorry, name can no longer contain capital letters

抱歉,名称不能再包含大写字母。

名称不能有大写字母,驼峰命名含有大写字母也不可以呦,换成小写的就好了。

保姆级教程:WebStorm创建VUE项目(一)

然后这里等待完成就可以了

保姆级教程:WebStorm创建VUE项目(一)

最后就是测试了,点击package.json的绿色箭头或者直接点击右上角的箭头

保姆级教程:WebStorm创建VUE项目(一)

当你打开浏览器输入:http://localhost:8080/ 显示如下界面,那么恭喜你,第一个Vue项目你已经成功搭建并可以运行了~

保姆级教程:WebStorm创建VUE项目(一)
目录
相关文章
|
4天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
44 5
|
2天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1
|
3天前
|
监控 JavaScript 前端开发
Vue 项目性能优化指南:提升应用速度与效率
Vue 项目性能优化指南:提升应用速度与效率
|
3天前
|
JavaScript Go
VUE3+vite项目中动态引入组件和异步组件
VUE3+vite项目中动态引入组件和异步组件
|
4天前
|
Web App开发 编解码 JavaScript
【Vue篇】Vue 项目下载、介绍(详细版)
【Vue篇】Vue 项目下载、介绍(详细版)
10 3
|
4天前
|
资源调度 JavaScript 前端开发
vue 项目运行过程中出现错误的问题解决
vue 项目运行过程中出现错误的问题解决
13 1
|
4天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
10 0
|
4天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
8 0
|
4天前
|
缓存 JavaScript API
一些常见的Vue项目性能优化策略
【5月更文挑战第8天】Vue项目性能优化包括代码分割、懒加载以减少初次加载时间;利用计算属性和侦听器处理复杂逻辑;优化v-for,使用key属性;减少DOM操作;借助Vue Devtools分析性能;图片优化如使用WebP格式和懒加载;异步加载组件;精简第三方库和插件;考虑服务端渲染或预渲染;以及优化网络请求,如合并请求和利用缓存。实际应用中,需根据项目需求选择合适策略。
17 2
|
4天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程