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

相关文章

Spring配置扩展之JavaConfig的使用小结

《Spring配置扩展之JavaConfig的使用小结》JavaConfig是Spring框架中基于纯Java代码的配置方式,用于替代传统的XML配置,通过注解(如@Bean)定义Spring容器的组... 目录JavaConfig 的概念什么是JavaConfig?为什么使用 JavaConfig?Jav

Spring Boot Interceptor的原理、配置、顺序控制及与Filter的关键区别对比分析

《SpringBootInterceptor的原理、配置、顺序控制及与Filter的关键区别对比分析》本文主要介绍了SpringBoot中的拦截器(Interceptor)及其与过滤器(Filt... 目录前言一、核心功能二、拦截器的实现2.1 定义自定义拦截器2.2 注册拦截器三、多拦截器的执行顺序四、过

springboot的controller中如何获取applicatim.yml的配置值

《springboot的controller中如何获取applicatim.yml的配置值》本文介绍了在SpringBoot的Controller中获取application.yml配置值的四种方式,... 目录1. 使用@Value注解(最常用)application.yml 配置Controller 中

springboot中配置logback-spring.xml的方法

《springboot中配置logback-spring.xml的方法》文章介绍了如何在SpringBoot项目中配置logback-spring.xml文件来进行日志管理,包括如何定义日志输出方式、... 目录一、在src/main/resources目录下,也就是在classpath路径下创建logba

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

GO语言实现串口简单通讯

《GO语言实现串口简单通讯》本文分享了使用Go语言进行串口通讯的实践过程,详细介绍了串口配置、数据发送与接收的代码实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录背景串口通讯代码代码块分解解析完整代码运行结果背景最近再学习 go 语言,在某宝用5块钱买了个

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

C++多线程开发环境配置方法

《C++多线程开发环境配置方法》文章详细介绍了如何在Windows上安装MinGW-w64和VSCode,并配置环境变量和编译任务,使用VSCode创建一个C++多线程测试项目,并通过配置tasks.... 目录下载安装 MinGW-w64下载安装VS code创建测试项目配置编译任务创建 tasks.js

Nginx概念、架构、配置与虚拟主机实战操作指南

《Nginx概念、架构、配置与虚拟主机实战操作指南》Nginx是一个高性能的HTTP服务器、反向代理服务器、负载均衡器和IMAP/POP3/SMTP代理服务器,它支持高并发连接,资源占用低,功能全面且... 目录Nginx 深度解析:概念、架构、配置与虚拟主机实战一、Nginx 的概念二、Nginx 的特点

SpringBoot整合Apache Spark实现一个简单的数据分析功能

《SpringBoot整合ApacheSpark实现一个简单的数据分析功能》ApacheSpark是一个开源的大数据处理框架,它提供了丰富的功能和API,用于分布式数据处理、数据分析和机器学习等任务... 目录第一步、添加android依赖第二步、编写配置类第三步、编写控制类启动项目并测试总结ApacheS