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 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
javascript获取元素的计算样式
May 24 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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
php2html php生成静态页函数
2008/12/08 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
javascript轮播图算法
2016/10/21 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python实现批量下载文件
2015/05/17 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python自定义异常实例详解
2017/07/11 Python
python操作oracle的完整教程分享
2018/01/30 Python
python中join()方法介绍
2018/10/11 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
培训心得体会
2013/12/29 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年党员整改措施
2014/10/24 职场文书
卫生院义诊活动总结
2015/05/07 职场文书