vue-cli2.0转3.0之项目搭建的详细步骤


Posted in Javascript onDecember 11, 2018

Vue CLI介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

通过 @vue/cli 搭建交互式的项目脚手架。

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

一个运行时依赖 (@vue/cli-service),该依赖:

  • 可升级;
  • 基于 webpack 构建,并带有合理的默认配置;
  • 可以通过项目内的配置文件进行配置;
  • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject

因为项目技术架构需要,要是用vue-cli 3.0进行搭建,所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍,希望可以帮到有需要的朋友。

vue-cli 3.0 正式版于 8月10号发布!

详细的可以参考:https://cli.vuejs.org/zh/guide/

首先,既然不是一个版本,如果想使用V-C3,你需要卸载之前安装的2.0(有方式可以共存,暂不赘述),卸载了不会影响你以前的功能,使用不爽,可以再安装回去,安装就不说了,说下卸载。

第一步 卸载Vue-cli2

命令是:npm uninstall -g vue-cli

第二步 安装V-C3.0

方式很多,譬如 npm install -g @vue/cli 或者 yarn global add @vue/cli,根据嗜好,自选。

第三步 创建项目

相对2.0,V-C3创建就不是之前init webp..... 一大堆了。直接 vue create project,project是项目名字。so easy,如下图(mac报err-13,请使用sudo):

vue-cli2.0转3.0之项目搭建的详细步骤

我选了默认,没用淘宝镜像,选择Y后,会有如下图所示:

vue-cli2.0转3.0之项目搭建的详细步骤

这个时候你可以选择会车确认,但是个人建议,进行多选,根据自己需要选择,选择Manua...这一行,然后就会出现:

vue-cli2.0转3.0之项目搭建的详细步骤

自己空格就可以选择了,除了E2E,都是我需要的,所以如上图所选。

回车后,显示: Use class-style component syntax? 接下来就不细说了,一路Y就可以。

最终,我的选择如图,设置成功:

vue-cli2.0转3.0之项目搭建的详细步骤

最终目录为:

vue-cli2.0转3.0之项目搭建的详细步骤

第三步 干活吧

安装成功后,可以写业务了。

根据提示,运行一把,feel一下 3.0

vue-cli2.0转3.0之项目搭建的详细步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

666,跑起来的感觉很棒。

Javascript 相关文章推荐
javascript getElementsByName()的用法说明
Jul 31 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 #Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
详解react阻止无效重渲染的多种方式
Dec 11 #Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 #jQuery
利用jsonp解决js读取本地json跨域的问题
Dec 11 #Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 #Javascript
You might like
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Js apply方法详解
2017/02/16 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
javascript实现留言板功能
2020/02/08 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
python中as用法实例分析
2015/04/30 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
2014预备党员党课学习心得范文
2014/07/08 职场文书
普通党员对照检查材料
2014/08/28 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
2016十一国庆节感言
2015/12/09 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js