一、 安装 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. java 中toString()方法详解

    1.toString()方法 Object类具有一个toString()方法,你创建的每个类都会继承该方法.它返回对象的一个String表示,并且对于调试非常有帮助.然而对于默认的toString() ...

  2. SQL日期跟时间值序列

    与数据操作相关的场景要生成日期和时间序列,序列的范围是从输入值@start到@end,且具有一定的时间间隔.这样的场景包括填充数据仓库中的时间维度.应用程序的运行时间安排以及其他.可以借助http:/ ...

  3. yii2 定义友好404

    1.frontend->config->main.php添加如下: 'errorHandler' => [ 'errorAction' => 'site/error', ], ...

  4. post上传文件限制--另一种解决途径

    问题:项目之前的上传功能是没有问题的,但是今天同样的代码上传一个压缩包的时候出现了问题,报的是struts.xml的错,说是找不到返回的映射, 问题截图: 很奇怪的问题,之前都没问题的,仔细对比后发现 ...

  5. 设计模式6---代理模式(Proxy Pattern)

    代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 1.  静态代理 静态代理在使用时,需要定义接口或者父类,被代理对象与代理对象都实现相同的接口或者是继承相同父类. 接口:IUser ...

  6. 学习python2

    字符串遍历 列表遍历 元组遍历 字典遍历 <1> 遍历字典的key(键) <2> 遍历字典的value(值) <3> 遍历字典的项(元素) <4> 遍历 ...

  7. Using Lucene's new QueryParser framework in Solr

    Sometime back, I described how I built (among other things) a custom Solr QParser plugin to handle P ...

  8. Replication--分区+复制

    1>配置订阅表使用分区,在发布的项目属性中设置"复制分区方案"和"复制索引分区方案"为true,然后初始化订阅 2>在发布数据库上修改发布属性 -- ...

  9. Fiddler2抓包

    https://www.cnblogs.com/conquerorren/p/8472054.html https://www.cnblogs.com/conquerorren/p/8472218.h ...

  10. c#设计模式系类:亨元模式

    一.引言 在软件开发过程中,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次去申请内存空间了,这样可能出现内存使用越来越多的情况,这样的问题是非常 ...