一、 安装 node.js

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、全局安装webpack

npm install webpack -g

安装完成后使用webpack -v,如果出现相应的版本号,则说明安装成功。

三、全局安装 vue-cli

npm install -g vue-cli

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

  1、在硬盘中找一个放项目的文件夹

  2、在文件夹下打开命令盘,输入命令

  Vue-Project是我们自己设置的项目名称,项目名称不能用中文

vue init webpack Vue-Project

  3、进入项目工程目录

  4、安装项目所需依赖  npm install

  //  5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource (后续版本会提示安装vue-router,vue-resource不用安装)

npm install vue-router vue-resource --save

创建完成的项目目录,如下图

各个目录的作用

最后一步启动项目

npm run dev

启动成功,打开浏览器8080窗口,页面如图所示

参考网址  : https://www.jianshu.com/p/1626b8643676

 
 

vue-cli 启动过项目步骤的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  3. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  4. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  5. 详解 IntelliJ IDEA 配置和启动maven 项目 步骤

    1.本地安装maven 1.1 安装 https://www.cnblogs.com/wkrbky/p/6350334.html?utm_source=itdadao&utm_medium=r ...

  6. Vue Cli 3.x项目如何部署到IIS子站点下

    Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...

  7. VUE CLI 3.0 项目引入 ElementUI

    ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 ...

  8. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

随机推荐

  1. google earth 中的飞行模拟器的键盘控制

  2. 不用SQL给打印记录编号

    以QUICKREPORT为例 页面设置如下: 其中ID为编号. 设置为表的ID字段. QUICKREPORT所在的FORM添加一个变量: var FprnT6: TFprnT6; Vxh:intege ...

  3. 多线程“尚未调用coinitialize” 报错

    关于多线程中创建使用TADOConnect.TADODataSet等Com组件时,必须先初始化Com 在多线程启用执行前 CoInitialize(nil); 在多线程启用执行后 CoUninitia ...

  4. solr入门教程-较详细

    Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注意事项;主要包括以下内容:环境搭建及调试;两个核心配置文件介绍;维护索引;查询索引,和在 ...

  5. BlangenOA项目展示(附源码)

    1. 登录界面 1.1表单校验 1.2信息有误 1.3正在登录   2.桌面 3.用户管理 3.1添加 3.2删除 3.3编辑 3.4设置用户角色 3.5设置用户权限 4.角色管理 5.权限管理(菜单 ...

  6. NuGet文件下载与应用

    nuget是一款.net下强大的包管理开发工具,Visual Studio 2013和Visual Studio 2015都缺省支持Nuget.在线开发能享受到Nuget的便利,但是如果是离线开发,还 ...

  7. Unit Vector Compression

    Recently, I compared a few methods for compressing generic unit vectors. The method used in Cry Engi ...

  8. struts2把表单数据封装到实体类里

    <form method="post" action=""> <input type="text" name=" ...

  9. Win7系统下搭建FTP

    一.创建FTP站点  1.打开:控制面板---系统和安全---管理工具---Internet 信息服务 2. 建站:右键点击网站---添加FTP站点 3. 输入FTP 站点名称---选择你的 FTP ...

  10. 1. Python2 ,Python3区别

    Python2: 1. 源码都含有PHP,Java,C等语言的规范陋习. 2.重复代码比较多. Python3: 源码很规范,清晰,简单,符合Python的宗旨.