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-cli 创建模板项目
Nov 19 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue实现登录功能
Dec 31 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python实现接口并发测试脚本
2019/06/25 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
工程项目建议书范文
2014/03/12 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
优秀教研组申报材料
2014/12/26 职场文书
个人汇报材料范文
2014/12/30 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
公司车队管理制度
2015/08/04 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js