使用vue cli4.x搭建vue项目的过程详解


Posted in Javascript onMay 08, 2020

cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里

1、创建项目 vue create vuetest

使用vue cli4.x搭建vue项目的过程详解 

2、选择配置方式

使用vue cli4.x搭建vue项目的过程详解

? Please pick a preset: (Use arrow keys) ☜(使用箭头键)
> default (babel, eslint)   ☜(使用默认的配置,会安装babel和eslint)
 Manually select features  ☜(手动配置)

这里我选择的是手动配置(使用↑ ↓箭头切换,Enter确认,箭头切换失效可以戳这里),当然如果你之前有保存过配置模板的话,在这里还会有第三个选项就是你之前保存过的(下面会说到),因为想想配置的不是很多,所以习惯了每次都是手动配置

3、手动配置项选择

使用vue cli4.x搭建vue项目的过程详解

通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选 (以下是每一个选项的详细解释)

? 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     ☜(转码器,可以将ES6代码转为ES5代码)
 ( ) TypeScript    ☜( js的超集,强类型语言)
 ( ) Progressive Web App (PWA) Support ☜(渐进式Web应用程序)
 ( ) Router    ☜(vue-router(vue路由))
 ( ) Vuex     ☜(vuex(vue的状态管理模式))
 ( ) CSS Pre-processors   ☜(CSS 预处理器(如:less、sass))
 (*) Linter / Formatter   ☜(代码风格检查和格式化(如:ESlint))
 ( ) Unit Testing    ☜(单元测试)
 ( ) E2E Testing    ☜(集成测试)

根据自己项目的实际需求选择合适的配置

我这里是全选了 这里是后面会出现的配置详细信息

?Use class-style component syntax? (Y/n): ☜(是否使用babel做转义)

---------------------------------------------------------------------------------------
?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? ☜(使用Babel与TypeScript一起用于自动检测的填充)

---------------------------------------------------------------------------------------
?Use history mode for router? (Requires proper server setup for index fallback in production) ☜(路由模式)

--------------------------------------------------------------------------------------
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ☜(CSS编译器)
> Sass/SCSS (with dart-sass) ☜(保存后编译)
 Sass/SCSS (with node-sass) ☜(实时编译)
 Less
 Stylus
----------------------------------------------------------------------------------------
?Pick a linter / formatter config: (Use arrow keys) ☜(选择语法检查规范)
> ESLint with error prevention only   ☜(只进行报错提醒)
 ESLint + Airbnb config    ☜(不严谨模式)
 ESLint + Standard config    ☜(正常模式)
 ESLint + Prettier     ☜(严格模式)
 TSLint (deprecated)    ☜(typescript格式验证工具)
----------------------------------------------------------------------------------------
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ☜(选择什么时候进行代码规则检测)
>(*) Lint on save     ☜(保存就检测)
( ) Lint and fix on commit    ☜(fix和commit时候检测)
-----------------------------------------------------------------------------------------
? Pick a unit testing solution
>(*) Mocha + Chai  ☜(mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装)
( ) Jest   ☜(安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect)
------------------------------------------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ☜(选择如何存放配置测) 
> In dedicated config files ☜(独立文件放置) 
 In package.json  ☜(放package.json里) 
 -----------------------------------------------------------------------------------------
 ? Save this as a preset for future projects? (y/N) ☜(保存上述配置,保存后下一次可直接根据上述配置生成项目,就是上面提到的第三种情况)

到这里配置就基本完成了,等待项目加载各种包...

加载完成后,进入项目, npm run serve 启动就可以了...

ps:下面看下vue-cli2.9.6升级vue-cli4.x相关问题

最近公司想要进行技术升级,因为疫情的原因,我在家关了两个多月(呜呜~),来公司他们都已经工作有一段时间,于是我只能自己搞了,先看一下我的环境

使用vue cli4.x搭建vue项目的过程详解

他们说新项目要求使用cli4.x,于是网上找了步骤执行(建议看完再实际操作)

1、首先卸载

npm uninstall -g @vue-cli

执行了之后使用 vue -V ,发现版本仍然是2.9.6,感觉没卸载掉呀,不管,继续按照网上的教程安装

2、安装

npm install -g @vue-cli

执行完成之后发现查看版本出来的仍然是2.9.6,很烦,然后就去网上找了一大堆,发现发现都是互相copy的博客,怎么办了,环境还是要继续升级的呀,然后我就只能采用最原始的办法  删文件

1、命令行执行 where vue

使用vue cli4.x搭建vue项目的过程详解

找到vue-cli文件夹,(不相信的话先备份一下)然后删除

使用vue cli4.x搭建vue项目的过程详解

2、执行 vue -V 这个时候应该是看不到版本号了吧(看得到那就说明你删错地方了,不能怪我)

3、重新安装

npm install -g @vue-cli

4、看一下版本号

使用vue cli4.x搭建vue项目的过程详解

总结

到此这篇关于使用vue cli4.x搭建vue项目的过程详解的文章就介绍到这了,更多相关cli4.x搭建vue项目内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
一个网马的tips实现分析
Nov 28 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
基于JavaScript实现控制下拉列表
May 08 #Javascript
JS数组的常用10种方法详解
May 08 #Javascript
如何实现js拖拽效果及原理解析
May 08 #Javascript
JS图片预加载三种实现方法解析
May 08 #Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
致标枪运动员加油稿
2014/02/15 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2014年党务工作总结
2014/11/25 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
门卫岗位职责
2015/02/09 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang