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. cookie,session,token之间的联系与区别

    发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应,  尤其是我不用 ...

  2. 蓝桥杯-摔手机问题【dp】

    非常详细的题解:戳这里 例题:poj-3783 Balls Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 115 ...

  3. Leetcode(102)-二叉树的层次遍历

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其层 ...

  4. C++ part6

    C++源文件从文本到可执行文件经历的过程 references: 一个C++源文件从文本到可执行文件经历的过程 C++源文件从文本到可执行文件经历的过程 gcc程序编译的静态链接和动态链接 保留中间过 ...

  5. QUIC协议文档翻译——什么是QUIC

    原文地址https://docs.google.com/document/d/1gY9-YNDNAB1eip-RTPbqphgySwSNSDHLq9D5Bty4FSU/edit QUIC是一个谷歌提出 ...

  6. GitHub SSH key

    GitHub SSH key https://help.github.com/en/github/authenticating-to-github steps HTTPS clone !== SSH ...

  7. Flutter: random color

    import 'dart:math' as math; import 'package:flutter/material.dart'; void main() => runApp(App()); ...

  8. 谷歌地球服务器"失联"的替代方案

    2020年11月下旬,谷歌地球开始无法连接.作为谷歌地球的替代方案,推荐使用国产软件"图新地球LSV".网址 http://www.tuxingis.com 下载"图新地 ...

  9. Python算法_整数反转(02)

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321 示例 3: 输入: 120 输出: 2 ...

  10. Javascript中的事件冒泡与捕获

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...