五分钟教你使用vue-cli3创建项目(三种创建方式,小白入门必看)


安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定。

点我进入node官网

安装好后cmd输入node -v查询是否安装成功,如下出现版本号即为成功。

在这里插入图片描述

二、Vue脚手架工具


全局安装vue-cli,命令行中输入:

npm install --g vue-cli

国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝镜像或者yarn

淘宝镜像的安装如下


npm install -g cnpm --registry=https://registry.npm.taobao.org

//安装成功后 使用 cnpm i xxx 代替 npm install xxx

三、创建项目


vue create 项目名

vue create code //其中code为你的项目目录名称 (enter键确认,并进入下一步)

最开始回车会出现下面两项


在这里插入图片描述

Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)

Manually select features(手动选择项目特性)

我们可以通过上下键,空格来选择我们需要的,一般我们都会选择手动配置

四、选择manually select (enter键确认,并进入下一步)


在这里插入图片描述

对于每一项的功能,王同学做一个简单的描述:

  • Babel 主要是对es6语法转换成兼容的js (选上)

  • TypeScript 支持使用TypeScript语法来编写代码

  • Progressive Web App (PWA) Support [把网页做的更像原生app]

  • Router 支持vue路由配置插件(一般都会选择)

  • Vuex 支持vue程序状态管理模式 (一般都会选择)

  • CSS Pre-processors 支持css预处理器 (一般都会选择)

  • Linter / Formatter 支持代码风格检查和格式化 (选上)

  • Unit Testing 单元测试

  • E2E Testing E2E测试

常见的项目选择如下


在这里插入图片描述

五、选择完成之后回车 这里我们选择3.x的


在这里插入图片描述

六、完成之后回车 出现以下界面


在这里插入图片描述

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n

七、回车 出现以下界面


在这里插入图片描述

这里的意思是问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

八、回车出现以下界面


在这里插入图片描述

这里的意思是选择一种格式化代码方式:我一般选择 ESLint + Prettier

九、回车出现以下界面


在这里插入图片描述

刷面试题

刷题的重要性,不用多说。对于应届生或工作年限不长的人来说,刷面试题一方面能够尽可能地快速自己对某个技术点的理解,另一方面在面试时,有一定几率被问到相同或相似题,另外或多或少也能够为自己面试增加一些自信心,可见适当的刷题是很有必要的。

  • 前端字节跳动真题解析

  • 【269页】前端大厂面试题宝典

最后平时要进行自我分析与评价,做好职业规划,不断摸索,提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难,摆好心态,做好准备,你也可以的。

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值