一.首先安装 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. Centos7.x 装机优化

    Linux 服务器装机后优化 参考 https://blog.csdn.net/u010133338/article/details/81055475 优化初始化脚本 vim init_optimiz ...

  2. Linux常用的安全加固

    一.账号和口令 1.1 禁用或删除无用账号 减少系统无用账号,降低安全风险. 操作步骤userdel <用户名> //删除不必要的账号.passwd -l <用户名> //锁定 ...

  3. 软件——IDEA主题美化

    前言 IntelliJ IDEA主要用于支持 Java.Scala.Groovy 等语言的开发工具,同时具备支持目前主流的技术和框架,擅长于企业应用.移动应用和 Web 应用的开发. IntelliJ ...

  4. Facebook 开源微光效果 Shimmer

    我的引言 晚上好,我是吴小龙同学,我的公众号「一分钟 GitHub」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. 今天要推荐的是 Facebook 开源的闪光效果:Shimmer, ...

  5. Mysql常用sql语句(14)- 多表查询

    测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...

  6. 你的团队需要一个正确的程序集(dll)管理姿势

    很多团队经历时间的积淀之后,都会有很多的可重用的公共技术组件.大部分的团队都会把这些公共组件生成程序集(dll)后,放到GIT或SVN的一个公共目录里面,以供各个项目中使用.起初在项目很少又或者是公共 ...

  7. 【HDU4991】树状数组

    http://acm.hdu.edu.cn/showproblem.php?pid=4991 用f[i][j] 表示 前i个数以第i个数结尾的合法子序列的个数,则递推式不难写出: f[i][j] = ...

  8. SQL注入和Mybatis预编译防止SQL注入

    什么是SQL注入?? 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或页面请求url的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命 ...

  9. IntelliJ Idea14 创建Maven多模块项目,多继承,热部署配置总结(三)

    pom.xml中repositories.pluginRepository的作用 pom.xml中repositories标签的作用是: 用来配置maven项目的远程仓库.示例如下: <repo ...

  10. java ->IO流_commons类

    commons-IO 导入classpath 加入classpath的第三方jar包内的class文件才能在项目中使用 1.创建lib文件夹 2.将commons-io.jar拷贝到lib文件夹 3. ...