vue-cli 启动过项目步骤
一、 安装 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 启动过项目步骤的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- 基于@vue/cli 的构建项目(3.0)
1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...
- 详解 IntelliJ IDEA 配置和启动maven 项目 步骤
1.本地安装maven 1.1 安装 https://www.cnblogs.com/wkrbky/p/6350334.html?utm_source=itdadao&utm_medium=r ...
- Vue Cli 3.x项目如何部署到IIS子站点下
Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...
- VUE CLI 3.0 项目引入 ElementUI
ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 ...
- vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- @vue/cli 构建得项目eslint配置
如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...
随机推荐
- [随笔]CENTOS7更换YUM源为163源(记录一下以防忘记)
2016年2月16日,最新163源变更后的更新方法: 访问地址为:http://mirrors.163.com/.help/centos.html 首先备份源: mv /etc/yum.repos.d ...
- Smarty配置与实例化
在smarty文件夹下建立一个test文件夹,test下建立如下: 编辑test.php如下: <?php require('../smarty/Smarty.class.php'); $sma ...
- gradle创建spring-boot项目
刚来新公司,熟悉了公司项目搭建的框架,了解到了一种新的项目管理工具:gradle,从网上了解,据说比maven更加灵活化,于是便学习了一番.在此记录下来,一遍以后使用.gradle的安装就不说了,网上 ...
- [GO]使用select实现斐波那契
package main import "fmt" func fibonacci(ch chan <- int, quit <- chan bool) { x, y : ...
- CancellationTokenSource 取消任务
using System; using System.Threading; using System.Threading.Tasks; namespace ConsoleApp1 { class Pr ...
- Django Managers管理器
Managers class Manager 管理器是向Django模型提供数据库查询操作的接口.Django应用程序中每个模型至少有一个管理器. Manager names 默认情况下管理器的名字为 ...
- 《Beginning Java 7》 - 5 - Hash Codes 哈希码
哈希码和 equals() 都是用来比较的. 1. 哈希码的作用是用来提高比较的效率.因为当比较的对象比较复杂时,equals() 可能很耗时,但哈希码只需要比较一个 int .哈希码常用于集 (se ...
- Hadoop完全分布式搭建全过程
本次操作共4台虚拟机(node211,node212,node213,node214),node211为NameNode,其余3台为DataNode,SecondaryNamenode为node212 ...
- OCP认证052新加的考试题及答案整理-21
21.Which two are true about roles? A) A role can be password-protected. B) A role can be granted to ...
- CentOS6.9 minimal版本安装图形化界面
CentOS6.9 minimal版本安装图形化界面 安装步骤如下: 1.安装Desktop组 # yum groupinstall "Desktop" -y 2.安装X Wind ...