一.首先安装 node.js

安装成功后在cmd里面使用:node -v 命令查看安装是否成功 下载链接:

链接:https://pan.baidu.com/s/1CL9J4Ryp3sL0zPYKJyS-3A
提取码:d8gl

安装国内的npm镜像源:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后使用:npm -v 或者cnpm -v (推荐使用cnpm 这样更快)

安装vue脚手架:vue-cli
npm install -g @vue/cli
cnpm install -g @vue/cli

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。

只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本

二、在cmd里面创建vue工程

使用:vue create +文件名   在cmd 创建vue 工程

注意:如果想在创建在某一个文件夹里面只需要切换到对应的目录下即可

出现以下画面就是安装成功:

三、使用webstorm打开创建好的工程

第一步:点击file下的open

选择创建好的vue工程,点击ok即可

点击这里,如果是第一次创建会显示addxx

点击 + 号,选择npm ,Name:名字随便起个,Scripts:这里的参数一定要填写serve,不能随便填写。然后点击ok

点击run 按钮,进行运行vue工程

出现以下页面,说明运行成功,我们可以使用下面的地址去访问我们创建好的工程了

使用webstorm 搭建 vue 开发环境的更多相关文章

  1. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  2. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  3. 十分钟上手-搭建vue开发环境(新手教程)

    想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...

  4. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  5. 搭建vue开发环境的步骤,六步完成

    搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...

  6. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  7. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  8. 搭建Vue开发环境

    1.安装Node.js 安装包下载地址: https://nodejs.org/en/ 安装时可以选择是否自动安装必要的工具,如Chocolatey.Python2,这里我选择了自动安装 Node.j ...

  9. 搭建vue开发环境的步骤

    相信很多人在刚开始学习vue这个框架的时候,在最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前在学习angular的时候搭建过一次,过了一个月后在搭建第二次的时候,竟然有一些混乱,所以今天想 ...

随机推荐

  1. RF(三层封装设计)

    一.用例分层思想 元素层:需要导入 Selenium2Library 库 包含所有的元素定位 流程层:需要导入 元素层.txt 资源 封装用例流程 案例层:需要导入 流程层.txt 资源 输出用例,传 ...

  2. redis关闭报没有权限No auth

    Redis安装之后,如果设置了密码,需要在关闭服务的时候也提供密码,否则无法关闭服务,可以直接通过修改/etc/init.d/redis启动脚本解决. Redis服务的启动和关闭脚本,只需要在关闭的脚 ...

  3. libevent(九)evhttp

    用libevent构建一个http server非常方便,可参考libevent(六)http server. 主要涉及的一个结构体是evhttp: struct evhttp { /* Next v ...

  4. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  5. Three Blocks Palindrome (easy version)[暴力-预处理]

    给定一个数组,找出最长的子序列,满足 a,a,..a,b,b,..b,a,a,..a 前面的a和后面的a都要是x个,中间的b是y个. 其中,x>=0且y>=0. \(\color{Red} ...

  6. WCF学习(二)

    WCF通道模型 绑定的本质是一个配置好的通道栈,为了方便程序员专著与业务逻辑,WCF提高了一系列常用绑定.随后会有相应的自定义通道栈代码 无论交互的另一方具体位置在哪里,WCF都会为消息的发送和接收建 ...

  7. 循环结构(for、while)

    3.4用for语句实现循环结构 什么是循环结构 for语句 1.什么是循环结构? 循环结构又称为重复结构,是利用计算机运算速度快以及能进行逻辑控制的特点来重复执行某些操作.重复执行的部分称为循环体. ...

  8. 深入理解Mybatis插件

    Mybatis插件实现原理 本文如有任何纰漏.错误,请不吝指出,谢谢! 首先,我并没有使用过 Mybatis的插件,但是这个和我写这篇文章并不冲突,估计能真正使用到插件的人也比较少,写这篇文章的目的主 ...

  9. 玩转FPGA边缘视觉——4k视频图像抓取

    随着现代图像及视频处理技术的不断发展,人们对图像处理提出了新的要求,最近几年,图像的分辨率和扫描频率都有了较大范围的提升,1080P分辨率的视频已经非常流行,2K甚至4K分辨率的图像也在火热发展中. ...

  10. 真香!PySpark整合Apache Hudi实战

    1. 准备 Hudi支持Spark-2.x版本,你可以点击如下链接安装Spark,并使用pyspark启动 # pyspark export PYSPARK_PYTHON=$(which python ...