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 强制类型转换函数
May 17 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
AJAX学习笔记
May 18 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jquery tools之tooltip
2009/07/25 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏