使用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 构造函数 实例分析
Nov 26 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
如何用python 操作zookeeper
2020/12/28 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
岗位职责的定义
2013/11/10 职场文书
中国梦的演讲稿
2014/01/08 职场文书
运动会稿件300字
2014/02/14 职场文书
党建工作先进材料
2014/05/02 职场文书
社区服务活动总结
2014/05/07 职场文书
环境保护建议书
2014/08/26 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
入队仪式主持词
2015/07/04 职场文书
初中班主任工作随笔
2015/08/15 职场文书
2016春节放假通知范文
2015/08/18 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL