vue-cli3脚手架/单文件/环境搭建

 

vue-cli3脚手架/单文件/环境搭建。vue3.x版本相对于2.x版本做了许多地方的优化,个人总结主要还是使用上使开发者更加一目了然,配置起来也更加的方便,减少了各种webpack里面的loader的配置.下面一起看一下,3.x版本该如何从搭建到配置再到开发的一个过程:

如果你已经搭建好了,请前往vue-config.js(封装了2.x的webpack配置)

一,安装

1.如果电脑之前有安装1.x或者2.x的先进行卸载

npm uninstall vue-cli -g

2.就是安装3.x,安装完了执行     vue -V    即可查看版本号.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

3.单文件运行安装(这点比较方面,就是单个的vue文件可以像html那样直接运行了)

npm install -g @vue/cli-service-global

二,先看一下单文件如何运行的,最后再深入了解脚手架

1.我们随便找一个目录,新建一个app.vue文件

2.打开命令行,执行如下命令(任意一个,多个文件可以制定某一个*.vue文件)

vue serve app.vue


or


vue serve

3.运行之后,hello world完美展示,相对来说,比以前的版本更加的简单粗暴,无须引入任何代码,即可像node一样运行*.vue文件

三,创建3.x脚手架

在3.x中有两种脚手架的创建方式,一种就是通过命令行,另外一种则是通过可视化工具,无论哪一种都比较方便,我们先来看第一种:

1.命令行方式构建:

vue create demo-vue

这时候会发现有一个可选项,可一通过键盘上下键控制,一个是默认配置,一个是手动配置

默认的配置里面基本什么内容都没有,只是一个简单的框架,路由,vuex等都需要自己手动去装的,我们这里选择手动安装,

进入是如下界面,为了方便大家理解,这里进行了注释:

我们也是通过上下键进行选择,确定选择的插件就按下空格,再次确定就是取消

根据自己的需要选择安装,选完之后回车就行,再往后就是跟2.x的执行步骤差不多了(有是否使用scss语句/less,是否执行代码检查等等),你也可以一直回车,到最后会让你选择是否保存方案,下次再次创建就不用选择了,十分方便.

举个例子:

选择scss

选择检查只提示错误

是否保存以后的预设方案

然后就创建完成了,我们一起看下目录

最后,cd到这个项目的文件夹,执行启动命令:

npm run serve
# OR
yarn serve

2.vue ui 可视化创建

这个来说更加的简单,感觉认识字就行了

随便找个文件夹,执行 vue ui:

到这基本搭建完成,还有一个巨大的好处,更加方便管理vue项目,看下图,你就懂了

学会了请前往 vue-config.js(封装了2.x的webpack配置),准备实战项目

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值