vue-cli3.0官网

1、node版本

node版本要求node>=8.9以上(推荐 8.11.0+)
使用以下命令查看node版本

node -v

如果不是最新的请到node下载下载最新版本安装即可。

2、vue-cli安装

(1)若已全局安装vue-cli (1.x 或 2.x),需先卸载

npm uninstall vue-cli -g

(2)全局安装 vue-cli3.0

npm install -g @vue/cli

3、创建项目

(1)创建项目

vue create 项目名

(2)配置

// 默认预设配置 babel, eslint
default (babel, eslint)
// 手动选择配置
Manually select features

(3)手动选择配置项目

Vue CLI v3.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support //支持渐进式网页应用程序
( ) Router //路由管理器
( ) Vuex //状态管理模式(构建一个中大型单页应用时)
( ) CSS Pre-processors //css预处理
(*) Linter / Formatter //代码风格、格式校验
( ) Unit Testing // 单元测试
( ) E2E Testing // 即端对端测试
  • 上下键:自由选择配置项
  • 空格:选中
  • enter:全部选择完毕之后按下执行

(4)enter后,Installed CLI Plugins配置细节

//1、 TypeScript
// 是否使用class风格的组件语法
Use class-style component syntax?
// 是否使用babel做转义
Use Babel alongside TypeScript for auto-detected polyfills? // 2、Router
// 路由使用历史模式
Use history mode for router? (Requires proper server setup for index fallback in production) // 3、CSS Pre-processors css预处理
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus // 4、Linter / Formatter 代码风格、格式校验
> TSLint
// 仅错误预防
ESLint with error prevention only
// Airbnb配置
ESLint + Airbnb config
// 标准配置
ESLint + Standard config
// Prettier配置(常用)
ESLint + Prettier // 5、选择lint方式:Pick additional lint features
// 保存时检查(常用)
(*) Lint on save
// 提交时检查
( ) Lint and fix on commit // 6、Unit Testing 单元测试
Mocha + Chai
Jest // 7、E2E Testing E2E(End To End)即端对端测试
Cypress (Chrome only)
Nightwatch (Selenium-based) // 8、选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json // 9、将此作为将来项目的预置吗?
Save this as a preset for future projects?
// 在单独的配置文件中
In dedicated config files
// 在package.json
In package.json // 10、按下enter构建项目

4、启动项目

// 1、进入项目
cd 项目名 // 2、运行
npm run serve

vue-cli3.0 开发环境构建的更多相关文章

  1. Spark 1.0 开发环境构建:maven/sbt/idea

    因为我原来对maven和sbt都不熟悉,因此使用两种方法都编译了一下.下面记录一下编译时候遇到的问题.然后介绍一下如果使用IntelliJ IDEA 13.1构建开发环境. 首先准备java环境和sc ...

  2. vue cli3配置开发环境、测试环境、生产(线上)环境

    cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...

  3. vue cli4.0 配置环境变量

    温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配 ...

  4. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  5. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  6. Windows 8.0上Eclipse 4.4.0 配置CentOS 6.5 上的Hadoop2.2.0开发环境

    原文地址:http://www.linuxidc.com/Linux/2014-11/109200.htm 图文详解Windows 8.0上Eclipse 4.4.0 配置CentOS 6.5 上的H ...

  7. android 5.0开发环境搭建

    Android 5.0 是 Google 于 2014 年 10 月 15 日发布的全新 Android 操作系统.本文将就最新的Android 5.0 开发环境搭建做详细介绍. 工具/原料 jdk- ...

  8. windows下cocos2dx3.0开发环境及Android编译环境搭建

    cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1.  所需工具         1)coc ...

  9. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

随机推荐

  1. 关于rand()

    虽然很早就知道rand是伪随机了,但是一般都懒得用srand. 直到模拟银行家算法时不用srand就造成数据实在有点假(-_-||) 所以要记得srand((int)time(0))啊

  2. redis运维与开发笔记

  3. Python module all in one

    Python module all in one Python Modules https://docs.python.org/3/tutorial/modules.html Fibonacc # F ...

  4. linux bash which

    linux bash which https://linuxize.com/post/linux-which-command/ Linux which command is used to ident ...

  5. 小程序 web-view

    小程序 web-view https://opendocs.alipay.com/mini/component/web-view https://opendocs.alipay.com/mini/ap ...

  6. Flutter: 显示&关闭系统叠加层ui

    import 'package:flutter/services.dart'; /// 关闭 SystemChrome.setEnabledSystemUIOverlays([]); /// 显示 S ...

  7. 比起USDT,我为什么建议你选择USDN

    2018年1月16日,USDT(泰达币)进入了很多人的视野.因为在这一天,在全球价值排名前50的加密货币中,包括比特币.莱特币以及以太坊在内的大多数的数字虚拟加密货币都遭遇了价格大幅下跌,只有泰达币价 ...

  8. JavaScript数据类型判断的四种方法

    码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14416375.html 本文分享了JavaScript类型判断的四种方法:typeo ...

  9. Spring系列.Resource接口

    接口简介 JDK中提供了java.net.URL这个类来用于获取不同种类的资源(根据不同前缀的url可以获取不同种类的资源).但是URL这个类没有获取classpath和ServletContext下 ...

  10. 基于tcp的应用层消息边界如何定义

    聊聊基于tcp的应用层消息边界如何定义 背景 2018年笔者有幸接触一个项目要用到长连接实现云端到设备端消息推送,所以借机了解过相关的内容,最终是通过rabbitmq+mqtt实现了相关功能,同时在心 ...