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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
Vue组件中slot的用法
Jan 30 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 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 代码规范小结
2012/03/08 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP7 弃用功能
2021/03/09 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
Js获取事件对象代码
2010/08/05 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
关于逃课的检讨书
2014/01/23 职场文书
党风廉设责任书
2014/04/16 职场文书
广播体操比赛口号
2014/06/10 职场文书
2015年消防工作总结
2015/04/24 职场文书
机关工会工作总结2015
2015/05/26 职场文书
信息技术国培研修日志
2015/11/13 职场文书