学习vue-cli3的项目搭建
安装
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确 (3.x):
vue --version
创建一个项目
#vue create
运行以下命令来创建一个新项目:
vue create hello-world
cd hello-world
npm run serve


这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目:
vue ui
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

拉取 2.x 模板 (旧版本)
Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
学习vue-cli3的项目搭建的更多相关文章
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
- vuejs学习——vue+vuex+vue-router项目搭建(二)
前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...
- vuejs学习——vue+vuex+vue-router项目搭建(一)
前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- vue cli3.0快速搭建项目详解(强烈推荐)
这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...
- vue多页面项目搭建(vue-cli 4.0)
1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...
- 在 vue cli3 的项目中配置双服务,模拟 ajax 分页请求
最近安装了下vue cli3版本,与 cli 2 相比,文件少了,以前配置方法也不管用了.demo 中的大量的数据,需要做成 ajax 请求的方式来展示数据,因此,需要启动两个服务,一个用作前端请求, ...
- 前端学习日记-vue cli3.0环境搭建
卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...
- vue学习(一)项目搭建
首先需要配置node和npm,如果没有安装的话,百度一下安装教程. 如果感觉npm下载速度慢,可以使用淘宝镜像cnpm,链接地址: http://npm.taobao.org/ 安装cnpm npm ...
- Vue -cli 入门 --项目搭建(一)
一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...
随机推荐
- PlayMaker Destroy Self 和 Destroy Object 和 Set Visibility
1. 这个销毁是销毁状态机所在的游戏物体,不能销毁父物体. 2. 这个销毁只要把想销毁的游戏物体拖进去就可以. 3. 这个其实不是真正的销毁游戏对象,只是把它的 MeshRenderer 组件关上了, ...
- Linux cp命令拷贝 不覆盖原有的文件
cp 参数说明: -i或--interactive 覆盖既有文件之前先询问用户. -r 递归处理,将指定目录下的文件与子目录一并处理. -R或--recursive 递归处理,将指定目录下的所有 ...
- Java基础入门 - 标识符及其命名规范
类名.变量名.方法名都称为标识符 标识符命名规范: 由字母(A-Z或a-z).数字.下划线(_)和美元符($)中的一种或多种组合而成 不可以数字开头 大小写敏感 关键字不能用作标识符 合法标识符如:D ...
- Spring课程 Spring入门篇 1-3Spring框架
课程链接: 1 框架与类库的区别: 框架封装了逻辑,高内聚,类库是松散的工具组合 框架专注于某一个领域,类库通用性较强 2 为什么使用框架: a 业务系统日趋复杂 b 重用度高,开发效率和质量提高 c ...
- cf1059D. Nature Reserve(三分)
题意 题目链接 Sol 欲哭无泪啊qwq....昨晚一定是智息了qwq 说一个和标算不一样做法吧.. 显然\(x\)轴是可以三分的,半径是可以二分的. 恭喜你获得了一个TLE的做法.. 然后第二维的二 ...
- LOJ#137. 最小瓶颈路 加强版(Kruskal重构树 rmq求LCA)
题意 三倍经验哇咔咔 #137. 最小瓶颈路 加强版 #6021. 「from CommonAnts」寻找 LCR #136. 最小瓶颈路 Sol 首先可以证明,两点之间边权最大值最小的路径一定是在最 ...
- 1像素border
1像素border 利用伪类和媒体查询: 伪类: border-1px($color) position:relative &:after display: block position: a ...
- <Android 基础(十)> FloatingActionButton
介绍 Source Code中的介绍如下: Floating action buttons are used for a special type of promoted action. They a ...
- Linux 信号表 signals
Linux支持POSIX reliable signals和POSIX real-time signals. 信号处理 进程接受到信号之后会有一些默认的处理方式,如下为5种处理方式: type des ...
- 什么是 pwd
pwd print work directory, 指linux terminal的当前目录 $ pwd