侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 4年前   428

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

1、创建项目 vue create vuetest

 

2、选择配置方式

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

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

3、手动配置项选择

通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 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相关问题

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

他们说新项目要求使用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-cli文件夹,(不相信的话先备份一下)然后删除

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

3、重新安装

npm install -g @vue-cli

4、看一下版本号

总结

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


  • 上一条:
    JS正则表达式必须包含数字、字母、特殊字符
    下一条:
    VSCode提高 Node 和 Vue 开发效率的插件推荐
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客