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

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled