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内存泄露的几种情况详细探讨
May 31 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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函数getenv简介和使用实例
2014/05/12 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python控制Firefox方法总结
2019/06/03 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python pandas 时间日期的处理实现
2019/07/30 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
学雷锋志愿服务月活动总结
2014/03/09 职场文书
《桥》教学反思
2014/04/09 职场文书
医院节能减排方案
2014/06/13 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
三好学生事迹材料
2014/12/24 职场文书
实习证明格式范文
2015/06/16 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
Python中time与datetime模块使用方法详解
2022/03/31 Python