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 刷新全集常用代码
Nov 22 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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删除文件夹的三种方法
2013/06/09 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JavaScript 特殊字符
2007/04/05 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Keras实现DenseNet结构操作
2020/07/06 Python
美国电视购物:QVC
2017/02/06 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
标准自荐信范文
2014/01/29 职场文书
会议欢迎标语
2014/06/30 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
个人授权委托书格式
2014/08/30 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
个人收入证明范本
2014/09/18 职场文书