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& ...
随机推荐
- java 中toString()方法详解
1.toString()方法 Object类具有一个toString()方法,你创建的每个类都会继承该方法.它返回对象的一个String表示,并且对于调试非常有帮助.然而对于默认的toString() ...
- SQL日期跟时间值序列
与数据操作相关的场景要生成日期和时间序列,序列的范围是从输入值@start到@end,且具有一定的时间间隔.这样的场景包括填充数据仓库中的时间维度.应用程序的运行时间安排以及其他.可以借助http:/ ...
- yii2 定义友好404
1.frontend->config->main.php添加如下: 'errorHandler' => [ 'errorAction' => 'site/error', ], ...
- post上传文件限制--另一种解决途径
问题:项目之前的上传功能是没有问题的,但是今天同样的代码上传一个压缩包的时候出现了问题,报的是struts.xml的错,说是找不到返回的映射, 问题截图: 很奇怪的问题,之前都没问题的,仔细对比后发现 ...
- 设计模式6---代理模式(Proxy Pattern)
代理设计模式 定义:为其他对象提供一种代理以控制对这个对象的访问. 1. 静态代理 静态代理在使用时,需要定义接口或者父类,被代理对象与代理对象都实现相同的接口或者是继承相同父类. 接口:IUser ...
- 学习python2
字符串遍历 列表遍历 元组遍历 字典遍历 <1> 遍历字典的key(键) <2> 遍历字典的value(值) <3> 遍历字典的项(元素) <4> 遍历 ...
- 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 ...
- Replication--分区+复制
1>配置订阅表使用分区,在发布的项目属性中设置"复制分区方案"和"复制索引分区方案"为true,然后初始化订阅 2>在发布数据库上修改发布属性 -- ...
- Fiddler2抓包
https://www.cnblogs.com/conquerorren/p/8472054.html https://www.cnblogs.com/conquerorren/p/8472218.h ...
- c#设计模式系类:亨元模式
一.引言 在软件开发过程中,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次去申请内存空间了,这样可能出现内存使用越来越多的情况,这样的问题是非常 ...