vue-cli4.5.x快速搭建项目


Posted in Vue.js onMay 30, 2021

一、安装vue-cli

npm i @vue/cli -g

二、创建项目

vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可;

1.生成项目文件;

终端输入:

vue create projectname

2.选择生成配置方式

此处选择最下面一项进行手动配置
(你要是喜欢用eslint就直接选vue3那项就好)

vue-cli4.5.x快速搭建项目

3.插件选择

选择你需要的插件,上下箭头移动,空格切换选取状态

vue-cli4.5.x快速搭建项目

选错或漏选?没事,构建完毕后你依然可以通过Vue UI来修改插件配置(下面会说到)

我不太适应ESLint,我这里就不逞能了…
最下的单元测试(unit Testing)和端到端测试(E to E Testing),有需求的话就开;

vue-cli4.5.x快速搭建项目

4.单项配置

选中第一项""Choose Vue version来进行单项配置:
是否为vue-router启用HTML5的history模式?

vue-cli4.5.x快速搭建项目

这个推荐启用,会让你的url更加整洁好看,可读性更高;
在SPA页面中,不少方法会依赖于HTML5的history模式;

你打算怎么存放这些babel&eslint之类的东西的配置文件?

vue-cli4.5.x快速搭建项目

这里我推荐第一项吧…生成单独的配置文件,这样修改的时候你只需要找到对应的配置文件即可修改对应的配置;

好的,你打算把这次构建项目的配置沿用到今后嘛?

vue-cli4.5.x快速搭建项目

这个你自己决定喽…
选择是的话,下次在执行第一步时就会出现第四个选项,那就是你自定义的配置方法.

给你自己这套配置取个名字:projectname

vue-cli4.5.x快速搭建项目

5.选择包管理工具

会让你选择是用npm还是yarn,我这里没有显示直接用了npm ,奇奇怪怪;
选自己想用的就好.

vue-cli4.5.x快速搭建项目

至此创建完成.

那我们就运行下看看吧!

npm run serve

进入相应的端口,即可看到Vue的初始界面.

vue-cli4.5.x快速搭建项目

三.VueUI修改配置

打开cmd,输入"vue ui"等待GUI服务启动,就会自动打开一个基于本地服务的UI界面

vue-cli4.5.x快速搭建项目

导入你的项目文件,即可在左侧插件等分类下对项目进行快捷运行&插件安装&插件卸载等等等等操作.

附-删除已保存的配置选项

如果你保存了配置,那么下次用的时候会在这里多一项你自己的配置,太多的话可能会有点眼花缭乱?

vue-cli4.5.x快速搭建项目

这些配置会保存在C盘Administrator下的".vuerc"文件中

vue-cli4.5.x快速搭建项目

删除相应的对象即可.

总结

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

Vue.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue CLI中模式与环境变量的深入详解
springboot+VUE实现登录注册
May 27 #Vue.js
vue+springboot实现登录验证码
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
You might like
PHP闭包(Closure)使用详解
2013/05/02 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python 字符串split的用法分享
2013/03/23 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python3大文件解压和基本操作
2017/12/15 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
一套比较完整的软件测试人员面试题
2012/05/13 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
销售人员工作自我评价
2014/09/21 职场文书
设备收款委托书范本
2014/10/02 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书