一.首先安装 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. 带权并查集--hdu3047 ZJnu stadium

    题意:给出一个n,m,n表示的是有n 个人,m表示的是 有m 对关系: 接下来输入的就是这m对关系,a,b,x:表示的是a,b相距x个距离:然后判断输入的是否与这个数的上面的数信息一致, 输出不一致的 ...

  2. CF思维联系– Codeforces-990C Bracket Sequences Concatenation Problem(括号匹配+模拟)

    ACM思维题训练集合 A bracket sequence is a string containing only characters "(" and ")" ...

  3. 关于RMQ问题的四种解法

    什么是RMQ问题:     RMQ (Range Minimum/Maximum Query):对于长度为n的数组A,回答若干询问RMQ(A,i,j)(i,j<=n-1),返回数组A中下标在i, ...

  4. C++ 函数重载,函数模板和函数模板重载,选择哪一个?

    重载解析 在C++中,对于函数重载.函数模板和函数模板重载,C++需要有一个良好的策略,去选择调用哪一个函数定义(尤其是多个参数时),这个过程称为重载解析. (这个过程将会非常复杂,但愿不要遇到一定要 ...

  5. aws mysql 开启慢查询日志, 并利用mysqlsla 分析

    1.开启慢查询日志服务 (a) sql 查询配置 # 查看慢日志是否开启,开启为ON show variables like 'slow_query%'; show variables like 'l ...

  6. 线段树 逆序对 Minimum Inversion Number HDU - 1394 Laptop

    Minimum Inversion Number HDU - 1394 求最小反转数,就是求最少的逆序对. 逆序对怎么求,就是先把所有的数都初始化为0,然后按照顺序放入数字,放入数字前查询从这个数往后 ...

  7. P2762 太空飞行计划问题 网络流

    题目描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合E={E1,E2,…,Em},和进行这些实验需要使用的全部仪器的 ...

  8. HTML往div中赋值

    HTML中往div赋值 <div id="mazey">content</div> 使用JavaScript: var mazey=document.get ...

  9. 在web中使用shiro(会话管理,登出,shiro标签库的使用)

    在shiro的主配置文件中配置,登出的请求经过的过滤器就可以了,在shiro的过滤器中有一个名称为logout的过滤 器专门为我们处理登出请求: 一.shiro会话管理器 shiro中也提供了类似于w ...

  10. 【Spark】Spark-shell案例——单词计数统计

    目录 步骤 一.准备本地文件以作测试 二.通过 --master启动本地模式 三.开发scala单词统计代码 步骤 一.准备本地文件以作测试 在第一台机器执行 mkdir -p /export/ser ...