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.extend 登录注册模态框的实现
Dec 29 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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中require和include路径问题详解
2014/12/25 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
两则小学生的自我评价分享
2013/11/14 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
对公司合理化的建议书
2014/03/12 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
英语教师自荐信
2014/05/26 职场文书
2014年财政局工作总结
2014/12/09 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书