一、安装

1、先检查是否有安装vue  (vue-cli3需要node大于等于8.9版本)

  //vue -V

2、如果没安装跳过、安装有3.0以下的版本就的先卸载掉以前的版本

  npm uninstall vue-cli -g  //或者yarn global remove vue-cli

3、卸载好后、接着开始安装新版本cli

  npm install -g @vue/cli  //yern global add @vue/cli

二、使用

  1、vue create(项目名)开始新建项目

    

  2、接着你会看到一个预设

  

  除了最后两个、其它都是以前保存过的

  (1)default(babel,eslint)能够快速构建一个项目、没附带人格辅助功能npm包

  (2)Manually select features 自定义依赖npm包

  3、接下来会看到这个样子的如下图、选着一些依赖等(空格选择)

  

   1 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  2 >( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
  3 ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
  4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
  5 ( ) Router // vue-router(vue路由)
  6 ( ) Vuex // vuex(vue的状态管理模式)
  7 ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
  8 ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
  9 ( ) Unit Testing // 单元测试(unit tests)
  10 ( ) E2E Testing // e2e(end to end) 测试

  

4、接下来会问你是否使用history router

  

5、后面紧接着会提示使用css预编、代码测试、何时测试、单元测试等。选择完后会问你是否保存本次选择的、然后给本次保存起个名字

最后安装完 npm run serve 启动项目

vue脚手架3.0的安装与使用的更多相关文章

  1. Vue脚手架(vue-cli)安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  2. vue脚手架3.0的搭建

    一.安装node 打开cmd输入node -v查看是否安装成功 显示node版本号表示安装成功,显示‘node’不是内部或外部命令表示未安装node.node安装地址:http://nodejs.cn ...

  3. React/VUE 脚手架2.0和3.0

    react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...

  4. vue-cli3.0 vue脚手架3.0的使用

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn globaladd @vue/cli 安装成功后查看版本:vue -V(大写的V)     2.命令 ...

  5. vue.js 2.0 --- 安装node环境,webpack和脚手架(入门篇)

    1.环境搭建 1.1.安装node.js 1.2 安装过程很简单,一路“下一步”就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v,如下图,如果出现相应的版本号 ...

  6. Mac OS X下安装Vue脚手架(vue-cli)

    前言 Vue作为前端三大框架(Angular,React,Vue)之一,号称是最简单,最容易上手的框架,同时也是行内的大趋势,还可以用来开发最火的小程序.具有开发快,双向数据流等特点,有些人认为Vue ...

  7. npm安装使用及vue脚手架安装

    公司在前端用vue开发项目,那就学习下啦,第一步,在安装vue-devtools过程中,npm作为官方manual installtion方式,肯定必不可少. NPM是随同NodeJS一起安装的包管理 ...

  8. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  9. Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...

随机推荐

  1. 【三剑客】awk函数

    1. 内置函数 awk的内置函数有算术.字符串.时间.位操作和其它杂项的函数. 1.1 算术函数 atan2(y,x)  返回弧度的反正切(y/x) cos(expr)  返回expr的余弦(以弧度形 ...

  2. JavaSE——装饰设计模式+简单加密解密工程

    2019独角兽企业重金招聘Python工程师标准>>> 声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础 ...

  3. windows中配置安装mysql数据库

    MySql 是一种免费的关系型数据库,相较于 MsSqlServer 和 Oracle 比较轻量化,安装也很简单,而且免费不需要的版权费用,个人认为一般的小项目采用还是比较合适的,当然也有部分数据量很 ...

  4. Mybatis时间范围查询,亲测有效

    Md2All export document .output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospa ...

  5. 谷歌浏览器的F12用处及问题筛查笔记

    在前端测试功能的时候,经常有些莫名其妙的错误,这个时候开发会说打开F12看一下吧,所以感觉这个开发者功能很有用,研究一下,做如下记录: Elements:左栏以DOM树形式查看网页源代码(HTML), ...

  6. Android控件重叠显示小记

    方案一 利用布局控件显示优先级 在xml中RelativeLayout,FrameLayout,靠后的控件显示在上层. 利用margin属性 margin属性可以控制控件间的距离,属性值为正值时,越大 ...

  7. Java——Java中编码问题

    在开发过程中经常会遇到一会乱码问题,不是什么大问题,但是也挺烦人的,今天来将我们开发总结的经验记录下来,希望可以给大家一些帮助. 一些概念: 字符:人们使用的记号,抽象意义上的一个符号.比如:‘1’, ...

  8. 你知道Spring是怎么解析配置类的吗?

    彻底读懂Spring(二)你知道Spring是怎么解析配置类的吗? 推荐阅读: Spring官网阅读系列 彻底读懂Spring(一)读源码,我们可以从第一行读起 Spring执行流程图如下: 如果图片 ...

  9. 如何理解三大运营商发布的《5G消息白皮书》?

    如何理解三大运营商发布的<5G消息白皮书>? 2020年4月8日中国移动.中国电信.中国联通携手华为.小米.vivo.OPPO.中兴等11家终端厂商联合发布了<5G消息白皮书> ...

  10. C:__attribute__ weak 的作用

    关于 weak weak经常出现在各种c代码中,其作用是将当前文件的对应函数声明为弱函数符号,如果外部文件出现相同的函数名,最终编译出来的 文件会优先指向外部文件的函数符号: 通常需要使用__attr ...