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项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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 Socket 编程
2010/04/09 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
php实现的mongodb操作类
2015/05/28 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
谈谈Python中的while循环语句
2019/03/10 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
编写strcpy函数
2014/06/24 面试题
do you have any Best Practice for testing
2016/06/04 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
团结友爱主题班会
2015/08/13 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android