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之典型高阶函数应用介绍二
Jan 10 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
canvas的神奇用法
Feb 03 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 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函数之子字符串替换 str_replace
2011/03/23 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python迭代器的使用方法实例
2013/11/21 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
教师考核鉴定意见
2015/06/05 职场文书
行政处罚告知书
2015/07/01 职场文书
小学大队长竞选稿
2015/11/20 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript