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面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
原生js实现购物车
Sep 23 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
Python控制Firefox方法总结
2019/06/03 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
研究生个人学年总结
2015/02/14 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
董事会决议范本
2015/07/01 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记