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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 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文件中是否含有bom的函数
2012/05/31 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
css配合jquery美化 select
2013/11/29 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
webpack+vue.js快速入门教程
2016/10/12 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
Vuex 入门教程
2018/01/10 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
整理Python 常用string函数(收藏)
2016/05/30 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
医科大学生毕业的自我评价分享
2013/11/12 职场文书
项目考察欢迎辞
2014/01/17 职场文书
委托书怎么写
2014/07/31 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
Python List remove()实例用法详解
2021/08/02 Python