使用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 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
JS获取父节点方法
Aug 20 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
几种tab切换详解
Feb 03 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python切片用法实例教程
2014/09/08 Python
python实现二分查找算法
2017/09/21 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python处理大日志文件
2019/07/23 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
大学新闻系自荐书
2014/05/31 职场文书
护士求职信
2014/07/05 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript