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 setattribute批量设置css样式
Nov 26 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
js实现聊天对话框
2020/02/08 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python样条插值的实现代码
2018/12/17 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
法学毕业生自荐信
2013/11/13 职场文书
开学季活动策划方案
2014/02/28 职场文书
大学生自我鉴定书
2014/03/24 职场文书
保护环境倡议书
2014/04/14 职场文书
党支部四风整改方案
2014/10/25 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Redis性能监控的实现
2021/07/09 Redis
关于MySQL中explain工具的使用
2023/05/08 MySQL