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代码
Sep 17 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
Vue渲染函数详解
Sep 15 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
移动端手指操控左右滑动的菜单
Sep 08 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
程序员编程十条戒律
2009/07/09 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
运动会800米加油稿
2014/02/22 职场文书
车间主任岗位职责
2014/03/16 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
学校节能减排倡议书
2014/05/16 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
《失物招领》教学反思
2016/02/20 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS