vue-cli 3.0 正式版于2018年8月发布,截至到2020年08月05日版本已经更新到4.4.6。Vue CLI 的包名称由 vue-cli 改成了 @vue/cli,目前网上很多的Vue项目搭建教程由于没有说明使用的vue-cli的版本,不同的操作方式往往给新人造成很大的困扰。3.0+与2.*版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友。

vue-cli(旧版本) @vue/cli(新版本-推荐)
安装环境 Node.js (>=6.x, 8.x preferred)
npm version 3+ and Git
Node.js 8.9 或更高版本 (推荐 8.11.0+)
安装 npm install vue-cli -g npm install -g @vue/cli 或者 yarn global add @vue/cli
查看版本号 vue -V
卸载 npm uninstall vue-cli -g 或 yarn global remove vue-cli npm uninstall @vue/cli -g
创建vue项目 vue init
两种常用的模板类型:
webpack-simple webpack
如:vue init webpack my-project
vue ui 通过图形化页面创建
vue create 通过命令行创建
启动vue项目 npm run dev 或 npm start npm run serve
打包vue项目 npm run build
  • 如果你安装新版前已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

  • vue ui 通过图形化页面创建vue项目是vue-cli 3.0+以后版本才有的功能!!!


欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。

新老版本vue-cli的安装及创建项目等方式的比较的更多相关文章

  1. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  2. vue学习:安装及创建项目

    1.先安装npm 参考链接:https://www.cnblogs.com/Hao-Killer/p/7235398.html 查看npm版本:在终端输入:npm -v 2.在安装vue # 安装vu ...

  3. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  4. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  5. vue cli的安装与使用

    一.简介 vue作为前端开发的热门工具,受到前端开发人员的喜爱.为了简化项目的构建,采用vue cli来简化开发. vue cli是一个全局安装的npm包,提供了终端使用的命令.vue create可 ...

  6. 05. flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中)

    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...

  7. vue安装及创建项目的几种方式

    原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...

  8. vue-cli 3.0 安装和创建项目流程

    使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装  npm install -g vue@cli 2. ...

  9. vue进阶:基于vue-cli创建项目(搭建手脚架)

    vue-cli安装.创建项目 基于vue-cli创建的项目进行开发 使用vue-cli图形化界面搭建项目 插件与工具 一.vue-cli简介.安装.创建项目 Vue-cli是基于Vue.js进行快速开 ...

随机推荐

  1. ElasticSearch 定时批量删除N天前的数据

    描述: 之前我已经完成了使用ElasticSearch.kibana.filebeat.三个工具完成分布式集群收集 分布在各个ip地址上的微服务日志,这样就可以统一的在一个服务器上查看了所有的微服务产 ...

  2. Lua-源码-字符串的resize函数-luaS_resize

    // 这里需要问一下:upval和一般的对象有什么区别?为什么要单独一个函数来处理? void luaC_linkupval (lua_State *L, UpVal *uv) { global_St ...

  3. [Cordova]Cordova6.x自定义插件之Andorid

    1.继承了CordovaPlugin的Java Class 需要重写execute方法,如下: 2.在res/xml/config.xml中关联上述java class 3.在assets/www/p ...

  4. Python Ethical Hacking - BACKDOORS(7)

    Handling Errors: If the client or server crashes, the connection will be lost. Backdoor crashes if: ...

  5. 集训作业 洛谷P1443 马的遍历

    这个题是个搜索,而且有是最少的步数,肯定就是广搜啦,不知道为什么的同学先去学习一下广搜吧. 养成好习惯,看见最少步数就去想想广搜(只是我自己觉得) 竟然这个题可以如此顺畅的想到广搜,感觉不难啊,但还有 ...

  6. P1290 欧几里德的游戏(洛谷)

    欧几里德的两个后代 Stan 和 Ollie 正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数 M 和 N,从 Stan 开始,从其中较大的一个数,减去较小的数的正整数倍,当然, ...

  7. 五大高效的PDF文件搜索引擎

    当你花了半个多小时在线搜索PDF文档,却发现您找到的文档都不是您需要的PDF格式.如前说述,您可以先打开PDF文档查看是不是PDF格式的,然后再到web浏览器中下载该文档.那么,为了确保您获得的文档是 ...

  8. 30个Linux Shell脚本经典案例(上)

    编写Shell过程中注意事项: 开头加解释器:#!/bin/bash 语法缩进,使用四个空格:多加注释说明. 命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用. 默认变量是全局的 ...

  9. PyQt5事件处理

    事件介绍 事件的处理机制非常的复杂,属于PyQt底层的事,不必我们关心,学会使用就行.如果说事件是用来创建窗口,那么信号与槽就是用来对这个控件进行处理.事件属于低级的处理方式,信号与槽是高级的处理方式 ...

  10. NoSQL数据库-MongoDB 学习(一)

    基本介绍 MongoDB 是为了快速开发互联网 Web 应用而设计的数据库系统 MongoDB 的设计目标是极简.灵活.作为 Web 应用栈的一部分 MongoDB 的数据模型是面向文档的,所谓文档是 ...