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. 论TEMP临时变量与VAR静态变量区别

    TEMP临时变量:顾名思义,这种变量类型是临时的,没有固定的存放数据的内存空间.每次扫描结束后则清零,在下个扫描周期开始时,这个变量的值都是不确定的,一般为0.使用临时变量需要遵循一个原则:先赋值再使 ...

  2. Scala 基础(十二):Scala 函数式编程(四)高级(二)参数(类型)推断、闭包(closure)、函数柯里化(curry)、控制抽象

    1  参数(类型)推断 参数推断省去类型信息(在某些情况下[需要有应用场景],参数类型是可以推断出来的,如list=(1,2,3) list.map() map中函数参数类型是可以推断的),同时也可以 ...

  3. 数据可视化之DAX篇(十)在PowerBI中累计求和的两种方式

    https://zhuanlan.zhihu.com/p/64418286 假设有一组数据, 已知每一个产品贡献的利润,如果要计算前几名产品的贡献利润总和,或者每一个产品和利润更高产品的累计贡献占总体 ...

  4. 开源|如何开发一个高性能的redis cluster proxy?

    文|曹佳俊 网易智慧企业资深服务端开发工程师 背    景 redis cluster简介 Redis cluster是redis官方提供集群方案,设计上采用非中心化的架构,节点之间通过gossip协 ...

  5. 德布鲁因序列与indexing 1

    目录 写在前面 标记left-most 1与right-most 1 确定位置 德布鲁因序列(De Bruijn sequence) 德布鲁因序列的使用 德布鲁因序列的生成与索引表的构建 参考 博客: ...

  6. 小白从零开始阿里云部署react项目+node服务接口(二:node服务+web)

    我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init  一路enter 3  yarn add  express cors  ...

  7. 转自fineui论坛:解决fineui框架开发中的Designer.aspx.cs丢失问题

    在开发的时候碰到个问题,本来好好的Edit.aspx  Edit.aspx.cs  Edit.Designer.aspx.cs编辑Edit.aspx然后保存,编译的时候 发现Edit.aspx.cs里 ...

  8. P5198 [USACO19JAN]Icy Perimeter S (洛谷) (水搜索)

    同样是因为洛谷作业不会写…… 写(水)博客啦. 直接放题目吧,感觉放在代码框里好看点 Farmer John要开始他的冰激凌生意了!他制造了一台可以生产冰激凌球的机器,然而不幸的是形状不太规则,所以他 ...

  9. italic和oblique的区别

    italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字,而Oblique是倾斜的文字(让没有斜体属性的文字倾斜), 对于没有斜体的字体应该使用Oblique属性值来实现倾斜 ...

  10. #python自动化测试#代码执行时间测量模块timeit

    1. timeit模块timeit模块可以用来测试一小段python代码的执行速度 class timeit.Timer(stmt = 'pass',setup = 'pass',timer=< ...