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 开发环境构建的更多相关文章
- Spark 1.0 开发环境构建:maven/sbt/idea
因为我原来对maven和sbt都不熟悉,因此使用两种方法都编译了一下.下面记录一下编译时候遇到的问题.然后介绍一下如果使用IntelliJ IDEA 13.1构建开发环境. 首先准备java环境和sc ...
- vue cli3配置开发环境、测试环境、生产(线上)环境
cli3创建vue项目是精简版的少了build和config这2个文件,所以配置开发环境.测试环境.生产环境的话需要自己创建env文件. 需要注意2点: 1.cli2创建项目生成的config文件里的 ...
- vue cli4.0 配置环境变量
温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配 ...
- EJB3.0开发环境的搭建
EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- 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 ...
- android 5.0开发环境搭建
Android 5.0 是 Google 于 2014 年 10 月 15 日发布的全新 Android 操作系统.本文将就最新的Android 5.0 开发环境搭建做详细介绍. 工具/原料 jdk- ...
- windows下cocos2dx3.0开发环境及Android编译环境搭建
cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1. 所需工具 1)coc ...
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
随机推荐
- cookie,session,token之间的联系与区别
发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用 ...
- 蓝桥杯-摔手机问题【dp】
非常详细的题解:戳这里 例题:poj-3783 Balls Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 115 ...
- Leetcode(102)-二叉树的层次遍历
给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 返回其层 ...
- C++ part6
C++源文件从文本到可执行文件经历的过程 references: 一个C++源文件从文本到可执行文件经历的过程 C++源文件从文本到可执行文件经历的过程 gcc程序编译的静态链接和动态链接 保留中间过 ...
- QUIC协议文档翻译——什么是QUIC
原文地址https://docs.google.com/document/d/1gY9-YNDNAB1eip-RTPbqphgySwSNSDHLq9D5Bty4FSU/edit QUIC是一个谷歌提出 ...
- GitHub SSH key
GitHub SSH key https://help.github.com/en/github/authenticating-to-github steps HTTPS clone !== SSH ...
- Flutter: random color
import 'dart:math' as math; import 'package:flutter/material.dart'; void main() => runApp(App()); ...
- 谷歌地球服务器"失联"的替代方案
2020年11月下旬,谷歌地球开始无法连接.作为谷歌地球的替代方案,推荐使用国产软件"图新地球LSV".网址 http://www.tuxingis.com 下载"图新地 ...
- Python算法_整数反转(02)
给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321 示例 3: 输入: 120 输出: 2 ...
- Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...