vue cli2简单配置

2024-03-07 11:40

本文主要是介绍vue cli2简单配置,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue cli2简单配置

在项目文件夹下输入命令 vue init webpack vuecli2text(vuecli2text是自己命名的)
test> vue init webpack vuecli2text
? Project name vuecli2text
? Project description test vue cli2
? Author 
? Vue build standalone      
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue cli2脚手架的简单配置步骤

1.初始化vue init webpack runtimecompiler

PS D:\web\vuejs> vue init webpack runtimecompiler	

2.输入项目名字,输入runtimecomplier,敲回车

? Project name (runtimecompiler) //项目名字
? Project name runtimecomplier

3.项目描述,这里直接敲回车

? Project description (A Vue.js project) 

4.作者,敲回车

? Author 

5.一般选择第一个,各有优缺点

? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere//选择后呈现
? Vue build standalone

Runtime + Compiler和Runtime-only区别:
Runtime-only性能更高、代码量更少
在这里插入图片描述

6.是否使用路由,按需选择,此处不使用,键入n

? Install vue-router? (Y/n)//键入n后呈现
? Install vue-router? No

7.规范代码,此处选择y(建议使用n,使用ESLint会严格规范代码,很容易报错)

? Use ESLint to lint your code? (Y/n)
//键入y后呈现
? Use ESLint to lint your code? Yes

选择y而不想使用ESLint,可以修改config文件夹下的index.js,将index.js文件里的useEslint:true改为useEslint:false,如下图:
在这里插入图片描述

8.选择Standard

? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)//标准的Airbnb (https://github.com/airbnb/javascript)none (configure it yourself)? Pick an ESLint preset Standard

9.单元测试,选择n

? Set up unit tests (Y/n) ? Set up unit tests No

10.端到端测试,选择n

? Setup e2e tests with Nightwatch? (Y/n) ? Setup e2e tests with Nightwatch? No

11.选择第一个npm

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPMYes, use YarnNo, I will handle that myself? Should we run `npm install` for you after the project has been created? (recommended) npm

12.开始安装,稍等片刻

 vue-cli · Generated "runtimecompiler".# Installing project dependencies ...
# ========================npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.> core-js@2.6.11 postinstall D:\web\vuejs\runtimecompiler\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library! The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)> ejs@2.7.4 postinstall D:\web\vuejs\runtimecompiler\node_modules\ejs
> node ./postinstall.jsThank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)> uglifyjs-webpack-plugin@0.4.6 postinstall D:\web\vuejs\runtimecompiler\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.jsnpm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.18.4","npm":"6.14.6"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})added 1376 packages from 713 contributors in 25.405s35 packages are looking for fundingrun `npm fund` for detailsRunning eslint --fix to comply with chosen preset rules...
# ========================> runtimecomplier@1.0.0 lint D:\web\vuejs\runtimecompiler
> eslint --ext .js,.vue src "--fix"# Project initialization finished!
# ========================To get started:cd runtimecompilernpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

文件目录结构
在这里插入图片描述

这篇关于vue cli2简单配置的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/783389

相关文章

Android开发环境配置避坑指南

《Android开发环境配置避坑指南》本文主要介绍了Android开发环境配置过程中遇到的问题及解决方案,包括VPN注意事项、工具版本统一、Gerrit邮箱配置、Git拉取和提交代码、MergevsR... 目录网络环境:VPN 注意事项工具版本统一:android Studio & JDKGerrit的邮

SpringBoot3.4配置校验新特性的用法详解

《SpringBoot3.4配置校验新特性的用法详解》SpringBoot3.4对配置校验支持进行了全面升级,这篇文章为大家详细介绍了一下它们的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以参考... 目录基本用法示例定义配置类配置 application.yml注入使用嵌套对象与集合元素深度校验开发

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的