使用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 相关文章推荐
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
python生成器的使用方法
2013/11/21 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
python处理csv数据的方法
2015/03/11 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
django中模板的html自动转意方法
2018/05/27 Python
python生成ppt的方法
2018/06/07 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
windows支持哪个版本的python
2020/07/03 Python
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
优秀经理获奖感言
2014/03/04 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
个人承诺书格式范文
2015/04/29 职场文书
消夏晚会主持词
2015/06/30 职场文书
消费者投诉书范文
2015/07/02 职场文书
2016年校长新年寄语
2015/08/17 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
Python极值整数的边界探讨分析
2021/09/15 Python