前言:

这个搭建脚手架的话实际是我们创建一个新项目的第一步,当然,现在脚手架4.0都出来了,经过使用后发现跟我们之前的3.0使用方法是答题一样的,其中用vue-cli3.0来搭建我们的项目的话又分为两种,一种是直接用3.0的typescript的方法来创建使用项目,但是实际生活中我们会发现,这种语法应用还是比2.0那种语法来说难度更高一些,所以我们这里来说一说我们使用了vue3.0以后即想使用3.0的便捷和优点,又不想在对typescript掌握还不算特别充分的情况下就贸然的踏入这个领域。

实现步骤:

第一:安装全局脚手架,在这里安装的是4.0的脚手架,不用担心,他们的安装都是一样的

  1.  
    先卸载vue2.0的脚手架:npm uninstall vue-cli -g ,全局卸载
  2.  
     
  3.  
    安装vue3.0的脚手架: npm install -g @vue/cli ,全局安装

第二:打开cmd窗口,输入命令 vue create + 你的项目名

    1. 第三:选中我们需要的功能模块

      第四:选中配置路由的yes,然后回车根据自己需要选择语言

      第五:代码风格和eslint

      第六:代码一保存就进行检查,不要选择提交,会被坑的

      第七:选择lint的配置文件如何存放,这里我选了分别存到具体的config文件,而不是package,便于管理

      第八:是否保存本次创建项目的配置项,用于下次快速创建项目,保存下次一开就是三个选择

      到这里就配置结束了,一路回车就行了,搭建项目到此结束

vue-cli4.0 (vue3.0 的脚手架)的更多相关文章

  1. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  2. vue2.0与vue3.0项目创建

    脚手架安装与卸载 安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm ...

  3. Vue3.0脚手架搭建

    https://www.jianshu.com/p/fbcad30031c2 vue3.0官网:https://cli.vuejs.org/zh/guide/ 介绍: notice: 这份文档是对应 ...

  4. vue3.0脚手架 创建项目

    1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...

  5. Vue CLI4.0版本正式发布了!一起来看看有哪些新的变化吧

    Vue CLI4.0版本正式发布 这个主要的版本更新主要关注底层工具的必要版本更新.更好的默认设置和其他长期维护所需的微调. 我们希望为大多数用户提供平稳的迁移体验. Vue CLI v4提供了对Ni ...

  6. Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战

    Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...

  7. 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  8. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  9. 纯小白入手 vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  10. [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

    因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...

随机推荐

  1. 2FA双因素认证 - 原理和应用

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 引言 我们在登陆网站.或者通过VPN访问公司内网时,除了输入用户口令外 ...

  2. P8+架构师养成计划

    一.P8+要求 1.收集能力要求 1.专业能力 技术架构.业务架构.做到无中生有. 2.基石能力 沟通协调能力.团队管理能力.逻辑能力.风险控制能力. 3.影响力 团队内部影响.外部影响.行业影响力. ...

  3. mysql for update是锁表还是锁行

    转载至我的博客 https://www.infrastack.cn ,公众号:架构成长指南 在并发一致性控制场景中,我们常常用for update悲观锁来进行一致性的保证,但是如果不了解它的机制,就进 ...

  4. left jon连接查询踩坑记

    项目开发中经常会使用到多张表进行关联查询,比如left join关联查询. 如果有一张表A和一张表B,查询语句 SELECT a.*,b.name from A a left join B b On ...

  5. Codeforces Round #844:C. Equal Frequencies

    一.来源:Problem - C - Codeforces 二.题面 三.思路 先考虑一个子问题模型:我们现在有用\(m_1\)种随机字母组成的n个数,各字母个数未定,现在需要使这n个数变为\(m_2 ...

  6. KTL 最新版

    K,K线,Candle蜡烛图. T,技术分析,工具平台 L,公式Language语言使用c++14,Lite小巧简易. 项目仓库:https://github.com/bbqz007/KTL Core ...

  7. 模板函数中的const

    所有讨论都是底层const指针或引用,顶层const不会传递进模板. 模板中有const,不管传进来是否是const,T都是非const类型. template<typename T> v ...

  8. RTMP录屏直播屏幕数据获取与MediaCodec编码

    目录 前言 RTMP直播实现流程 视频采集--MediaProjection 编码--MediaCodec 音频采集--AudioRecord RTMP音频包数据 RTMP视频数据 前言 本文介绍的是 ...

  9. Ubuntu 16.04 LAMP(PHP7.0) 环境搭建并测试

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  10. 《.NET内存管理宝典 》(Pro .NET Memory Management) 阅读指南 - 第2章

    本章勘误: 暂无,等待细心的你告诉我哦. 本章注解: 出处:2.2.6 Windows内存布局 原文: segment heap:用于Universal Windows Platform程序,它提供了 ...