vue4 项目的创建
1,安装vue cli 脚手架,是全局安装
npm install -g @vue/cli
可以在输出信息中看到安装位置,例如:
C:\Users\xiaochangjian\AppData\Roaming\npm\node_modules\@vue
2,查看脚手架是否安装成功
vue --version
3,cmd 定位到要创建项目的目录位置
4,vue create 项目名字 如:vue create ruoyi-front-ui
通过键盘上下左右键,选择手动配置项目,出现如图文字:
Vue CLI v4.4.6
? 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
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
按方向键进行上下选择
按空格 选中
按A键全选
按I键全选
按enter 确认所有配置进入下一步
----------------------------------------------------------------------------------------------------------------
选中所有:
Use class-style component syntax? (Y/n) 是否使用class风格的组件语法?
Pick additional lint features? Lint on save // 保存就检测
? Save this as a preset for future projects? (y/N) N //是否记录下,以便下次继续使用这套配置
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes // 是否使用class风格的组件语法?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes 这个选项的意思是要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills 。如果实在搞不清楚具体是什么意思,可以先不用管,直接选择 Y ,进入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes 是不是用history模式来创建路由
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 询问项目的CSS预处理器 选择LESS
? Pick a linter / formatter config: Standard (询问项目的格式校验方式,提供一个插件化的javascript代码检测工具 ESLint + Prettier //使用较多)
? Pick additional lint features: Lint on save 询问项目的什么时候校验格式(1是保存时,2是提交时)
? Pick a unit testing solution: Mocha (Mocha 灵活,Jest 安装配置简单容易上手)
? Pick an E2E testing solution: Cypress (Cypress E2E功能测试框架 会安装很长一段时间)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 询问项目的配置文件存放在哪儿(1是独立文件,2是在package.json)这里选择独立的文件,选择2在后续配置postcs适配时存在问题。
? Save this as a preset for future projects? (y/N) 是否作为一个模板配置
当前项目示例:
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)
vue4 项目的创建的更多相关文章
- Intellij Idea系列之JavaSE项目的创建(一)
Intellij Idea系列之JavaSE项目的创建(一) 一.Intellij Idea于 Intellij Idea是捷克的Jetbrain公司的一款优秀的针对Java程序员的IDE,其自从问世 ...
- Asp.net MVC 4新项目中创建area的后续操作
Asp.net MVC 4新项目中创建area后,往往HomeController与area的HomeController路由发生混淆,需要手工设置一些地方避免mvc无法识别默认路由的状况. 无废话具 ...
- Web项目中创建简单的错误处理页面
当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...
- 2.2 利用项目模板创建ASP.NET MVC项目
1.启动VS2012,点击“文件|新建|项目”. 2.在新建项目的窗口中,选择ASP.NET MVC 4应用程序. 3.在新ASP.NET MVC 4项目窗口中的“选择模板”列表中选择“基本”模板,在 ...
- maven系列之二maven项目的创建和maven项目的结构
maven系列之一简单介绍了maven的基本信息,安装和配置,大家对maven有一个大概的了解,但是在maven项目开发中远远不够,为了进一步了解maven,现在我们介绍maven项目的创建和mave ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(4)-构建项目解决方案 创建EF DataBase Frist模式 进行本次文章之前,我们可能需要补充一些 ...
- 如何使用git创建项目,创建分支
git config -global user.name "Your name" git config -global user.email "you@example.c ...
- TFS2013 升级至TFS2015及项目的创建
TFS2015已发布想体验下新特性 由于现有数据库已经是SQLSERVER2012 SP1 开发工具VS2013 都符合升级要求 现在体验下吧 1.先下载TFS2015 运行安装向导一路NEXT 直至 ...
- 关于Maven的web项目的创建
网上关于Maven的web项目创建多种多样,先本人在研究Maven之余,创建一套自己试过并有效的创建步骤. 1.点击右键>选择Maven Project,如下图所示: 2.点击创建,如下图所示: ...
- SpringBoot项目的创建流程(初步)
小伙伴们在学习的过程中大概也发现了这两个框架需要我们手动配置的地方非常多,不过做JavaEE开发的小伙伴们肯定也听说过“约定大于配置”这样一句话,就是说系统,类库,框架应该假定合理的默认值,而非要求提 ...
随机推荐
- 算法小白刷了一周 LeetCode 后的思考
Hi,我是 itchao 我自己工作有 2 两年多的前端开发经验,但是数据结构与算法一直不好,基本就是一个算法小白的水平. 听说大公司面试都要手写算法题,最近为了以后能去更好的公司,然后其实心里比较着 ...
- Python 爬虫之 xpath
0x01 XML 基础 xpath 是在 XML 文档中搜索内容的一门语言 HTML 是 XML 的一个子集 XML 代码举例: <book> <isbn>978xxxxxxx ...
- mysql 重新整理——sql 执行语句的顺序[五]
前言 盗图: 其实在复杂的语句中,需要我们逐步去分析,然后呢,我们了解一些优化器到底是如何帮我们优化的,就知道到底是mysql怎么执行代码. 我把以前的丢了,后续补全.
- Spring 源码阅读(二)IoC 容器初始化以及 BeanFactory 创建和 BeanDefinition 加载过程
相关代码提交记录:https://github.com/linweiwang/spring-framework-5.3.33 IoC 容器三种启动方式 XML JavaSE: ApplicationC ...
- 【知识点】如何快速开发、部署 Serverless 应用?
简介: 本文将详细介绍如何开发和部署 Serverless 应用,并通过阿里云函数计算控制台与开发者工具 Serverless Devs 进行应用的初始化.部署:最后分享应用的调试,通过科学发布.可观 ...
- 阿里云视觉智能开放平台正式上线,阿里集团核心视觉AI能力对外开放
1月底,阿里云正式推出以计算机视觉AI能力为核心的视觉智能开放平台(vision.aliyun.com),平台目前已上线8大类目,超过50多种视觉AI能力,面向人脸识别,文字识别,商品理解,内容安全, ...
- 项目实战总结以及接入U-APM
简介: 导致 App 性能低下的原因有很多,除去设备硬件和软件的外部因素,其中大部分是开发者错误地使用线.系统函数.编程范式.数据结构等导致的.即便是较有经验的程序员,也很难在开发时就能避免所有导致 ...
- dotnet OpenXML 解析 PPT 图表 解析日期时间表示内容
在 OpenXML 里的图表存放的日期时间很多存放的是数值,需要进行转换才能获取到用户可见的字符串 日期在 OpenXML 里可以使用数值存放,需要根据数值和格式化字符串转换为用户可见的字符串 如以下 ...
- 第一章 Jenkins安装配置
Jenkins官网 # 官网: https://www.jenkins.iohttps://www.jenkins.io/zh/ # docker安装: https://www.jenkins.io/ ...
- .NET Aspire 预览版 6 发布
.NET Aspire 预览版 6 引入了一系列重大更新,主要包括 API 的重大更改.安全性和可靠性的提升.新的资源和组件.应用程序主机的更新.测试支持.模板更新.组件更新.Azure 配置包的更新 ...