一、 安装 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. struts2标签使用详解

    Struts2常用标签总结一 介绍1.Struts2的作用 Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性.实现了更好的代码 ...

  2. SIGPIPE信号解析

    当服务器close一个连接时,若client端接着发数据.根据TCP协议的规定,会收到一个RST响应,client再往这个服务器发送数据时,系统会发出一个SIGPIPE信号给进程,告诉进程这个连接已经 ...

  3. CentOS 7搭建FTP服务器

    安装vsftpd 命令:yum -y install vsftpd 修改ftp配置文件 命令:vim /etc/vsftpd/vsftpd.conf 按i进入insert模式后,按以下要求修改 ano ...

  4. 使用word写博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  5. c_c++基础问题(平时读书时笔记)

    1 IP私有地址: 10.0.0.0 -- 10.255.255.255 172.16.0.0 -- 172.31.255.255 192.168.0.0 -- 192.168.255.255 2OS ...

  6. Python之模块一

    1 >模块介绍: 模块,用一坨代码实现了某个功能的代码集合,类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的          重用性和代码间的吻合, ...

  7. Python-面向对象编程01_什么是面向对象

    Python从设计之初就已经是一门面向对象的语言了,正因如此,在Python中创建一个类和对象是很容易的. 什么是面向对象? 面向对象程序设计(Object-oriented programming, ...

  8. RzToolbutton用法

  9. Visual Studio Error

    Visual Studio Error 注意:文中所有“系统”用词,均指Windows Console操作系统IO Debug Error 错误类型 #0表示调用约定错误 可以考虑在指针前面加上_st ...

  10. INDEX--关于索引的琐碎

    --=========================================================更新时的操作1>更新时有两种方式,一种是在原来的位置更新,另外一种是移除删除 ...