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 相关文章推荐
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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 生成饼图 三维饼图
2009/09/28 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php表单处理操作
2017/11/16 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
你应该知道的python列表去重方法
2017/01/17 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
adidas美国官网:adidas US
2016/09/21 全球购物
体育教育个人自荐信范文
2013/12/01 职场文书
写给保洁员表扬信
2014/01/08 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
英语教研活动总结
2014/07/02 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
结婚堵门保证书
2015/05/08 职场文书
村主任当选感言
2015/08/01 职场文书
MySQL读取JSON转换的方式
2022/03/18 MySQL