WebStorm 零起点搭建Vuejs项目 - 全程篇
文章目录
- WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试
- 一、步骤讲解
- 二、 浏览器演示效果：
- 三、附图 · 所有版本检测截图
- 相关文章阅读：
WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试
近几个月一来，一直在研究vuejs的高级用法，无意中发现自己用的开发工具，已经无法满足自己的开发需求，严重阻碍了开发进程。
索性抛弃了旧IDE，研究了一下webstorm这款新的编辑器。果然是事半功倍啊！
为了更好更有价值的给大家提供参考，这里我们零起点开始，说明 “如何使用WebStorm进行Vue.js项目的零起点、搭建、开发、测试？”
一、步骤讲解
安装node.js （同时npm会跟随nodejs自动化安装）
npm安装（这里默认上一步已经共同安装OK）
npm 转 cnpm 安装（使用淘宝镜像）
如下图所示:这一步容易报错npm WARN版本问题：npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at leas t 2.1.6 to avoid a ······
.
解决办法：npm降配具体操作：cmd命令分别执行如下指令npm install npm@4.6.1 -gnpm update -d代码运行成功之后，截图如下：
上述报错解决之后，CMD再重新操作npm淘宝cnpm镜像，指令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org验证安装成功？方法如下，CMD指令：cnpm -v
安装
webpack（CMD指令如下）
npm webpack -gcmd截图如下：
验证安装成功？方法如下，CMD指令：webpack -v全局安装
vue-cli（CMD指令如下）
cnpm install vue-cli -gcmd截图如下：
验证安装成功？方法如下，CMD指令：vue -V【-v字母V必须大写】安装软件：
Git安装软件：
WebStorm，设置软件使用权限，汉化等等（永久[查看方法]）
修改相关配置，为下一步新建vue.js项目做最后的准备。
打开
WebStorm软件，更改配置参数：圈中的复选框（设置为非选中状态，如下图所示）
新建vue项目，选择左侧边栏靠近底部的vue.js，默认路径不需要修改，只需要设置你的项目文件夹路径即可，enter回车之后进行项目命名、描述、作者等等的相关配置
如：my53 ， 截图略
.执行
Ctrl + E或者 鼠标悬停package.json+单击右键并选择Show npm Scripts，然后双击选择dev运行，演示项目
截图示下：
二、 浏览器演示效果：
三、附图 · 所有版本检测截图
相关文章阅读：
WebStorm 2018 v1.5 安装教程 - 补丁激活篇
WebStorm 开发工具 - 软件简介
WebStorm 汉化教程 - 含汉化包
WebStorm 零起点搭建Vuejs项目 - 全程篇
以上就是关于“ WebStorm 零起点搭建Vuejs项目 - 全程篇 ” 的全部内容。
WebStorm 零起点搭建Vuejs项目 - 全程篇相关推荐
- node.js安装express（零起点搭建本地测试服务器）- 教程篇
(含图文教程.代码对比,等)node.js安装express(零起点搭建本地测试服务器)- 教程篇 原教程 · 参考地址 执行step3之后,结果截图 · 如下图2 : 之后,执行step4,截图如下 ...
- lynda.com教程之Learning Python and Django_手把手零基础搭建Django项目
www.lynda.com作为全球一流的在线培训网站,一直以高质量的视频课程著称.其课程内容也是紧跟行业潮流,本人最近学了里面的一门课程Learning Python and Django, 分享一下 ...
- IDEA搭建JavaWeb项目，JDBC和Servlet-JSP技术实现注册功能
文章目录 使用IDEA搭建JavaWeb项目 一.IDEA新建JavaWeb项目 1.新建java项目 2.修改项目配置 3.项目部署到Tomcat 二.使用JDBC和Servlet-JSP技术实现注 ...
- 2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
- 【Parcel 2 + Vue 3】从0到1搭建一款极快，零配置的Vue3项目构建工具
前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的 ...
- react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
- vuejs项目性能优化 - 总结篇
首页等页面加载慢?打包编译后css/js文件过大?试试压缩.路由懒加载等技术 打包编译后,过大的文件如:app.css.app.js.vendor.js 本着 "开发环境".&qu ...
- vuejs项目开发环境搭建（ESlint安装）
vuejs项目开发环境搭建(ESlint安装) vuejs项目开发环境搭建,有时候需要安装ESlint! eslint对ES6语法支持更好,可以通过eslint在团队开发中快速统一ES6的语法,精简代 ...
- 零基础快速开发全栈后台管理系统（Vue3+ElementPlus+Koa2）—项目概述篇（一）
零基础快速开发全栈后台管理系统(Vue3+ElementPlus+Koa2)-项目概述篇(一) 一.项目开发总体框架 二.项目开发流程 三.项目技术选型
最新文章
- mysql 报错10614_golang使用go-sql-driver实现mysql增删改操作-Go语言中文社区
- XML Schema用法
- 458. 可怜的小猪
- 如何在容器内高效编程？
- 信息系统安全等级保护备案任务详单
- MySQL的odbc驱动 下载及安装
- 剑指offer面试题29. 顺时针打印矩阵(边界问题)
- Linux电源管理-wakelock
- HDU 6127 Hard challenge (极角排序)
- FGUI使用方法（四）：List列表的详细使用方式，包括List嵌套List
- 程序下载至开发板 芯片超时无应答，无法连接
- 考研408复习思路，学习方法
- 设计总结：进销存业务流程设计
- html网页设计导航栏制作教程,使用CSS制作立体导航栏
- 2022.4.7学习笔记
- python 拼多多_Python 登录拼多多下单
- 已成功与服务器建立连接，但是在登录过程中发生错误。
- 0018 求球的表面积和体积
- Pytorch中的DDP
- word文档如何插入公式编号并对齐