新开个项目,小项目,小。顺手就用vue吧,vue3出来也几个月了,直接上了吧。一年多没用vue了,用的时候也得再熟悉,不如直接干3了!

  vue官方推荐使用的脚手架是 Vite 和 vue-cli ,延续vue2时使用的vue-cli进行搭建,顺手顺眼。集成webpack,热更新,不用操心其他配置操作,专心项目开发。

  安装vue-cli就不说了。

   

  描述了vue的很多功能,比如 ......

  创建项目,可以使用 vue create app 或者 vue ui 来启动GUI页面。 都行..都行...

  哦,还是说一下,卸载之前老版本的vue-cli有时候卸载不干净,重新安装也用的之前的版本号,我的操作是,手动删

  npm -g 目录在 C:\Users\rionz\.nodejs\node_global  所有出现vue的全给删了

  yarn global 目录在 C:\Users\rionz\AppData\Local\Yarn\Data\global

  如果在使用vue命令的时候 出现 not found,那么在环境变量里面添加上bin目录就行了

  

  •   vue create

  这里 方向键 选择 "手动配置" 回车,注意一下,如果使用 git 的命令行方向键会有些问题,要配置一下命令行的设置,自行百度

  

  我这边需要用到这些东西,看你们自己项目需求了。 空格键选中

  

  呃...

  

  这里注意一下,部分开发者可能会喜欢用 Vue Class Component  用Class的方式编写Component

  

  看着自己的配就行了,有前端基础的这几个字都能懂

  Lint的时候不要选择lint on commit,据说有坑

  最后一项,说的是是否保存配置(下次直接创建的意思)

  

  至此,项目搭建完成,vue-cli会自己跑着安装依赖,创建文件等

  •   vue ui

  会在浏览器上面起一个GUI页面,自己看

  

  还是挺好看的,有颜色

  •   几个问题,说一下

  项目起来前,可能会有个报错

  

  大丈夫! 没有 X 就装 X 啊

  进入项目文件夹,yarn add vue-template-compiler  就行了 再 yarn serve 就起来了~~

  使用tslint,结尾没有分号,对象最后没有逗号,单双引号的问题,都有会warning,看的不舒服想消除的话...

  

  查阅后很多人给出这样的解决办法,但是并没有什么用,我使用的format方式是 vscode-typescript 但是各种方法也不行,不知道大家有没有解决方法。

  然后,我喜欢format之后自动加上逗号和分号,尝试了很多方式不知道在哪整,教教我... 喜欢超级干净整洁的代码

 

vue-cli脚手架搭建vue3.0+typescripe项目的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  3. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  4. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  5. 从零搭建vue3.0项目架构(附带代码、步骤详解)

    前言: GitHub上我开源了vue-cli.vue-cli3两个库,文章末尾会附上GitHub仓库地址.这次把2.0的重新写了一遍,优化了一下.然后按照2.0的功能和代码,按照vue3.0的语法,完 ...

  6. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  7. vue之cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  8. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  9. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

随机推荐

  1. sklearn.neighbors.NNeighborsClassifier 详细说明

    平时会用到sklearn.neighbors.NNeighborsClassifier函数来构建K最邻近分类器,所以这里对NNeighborsClassifier中的参数进行说明,文中参考的是scik ...

  2. Flink处理函数实战之一:深入了解ProcessFunction的状态(Flink-1.10)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  3. Python_入门第一篇【持续更新...】

    1.准备 准备电脑 和 分区 1.准备配置稍高的电脑(后后期需要装虚拟机),分辨率1920*1080 2.分区: C→系统 D→Project E→软件安装盘 F→其他 准备编辑器 1.Sublime ...

  4. “三剑客”之sed手中有剑

    一.sed介绍 sed是Stream Editor(字符流编辑器)的缩写,简称流编辑器.sed是操作.过滤和转换文本内容的强大工具.常用功能包括对文件实现快速增删改查(增加.删除.修改.查询),其中查 ...

  5. 大数据和Hadoop平台介绍

    大数据和Hadoop平台介绍 定义 大数据是指其大小和复杂性无法通过现有常用的工具软件,以合理的成本,在可接受的时限内对其进行捕获.管理和处理的数据集.这些困难包括数据的收入.存储.搜索.共享.分析和 ...

  6. webug第一关:很简单的一个注入

    第一关:很简单的一个注入 上单引号报错 存在注入,用order  by猜列的个数 union select 出现显示位 查数据库版本,用户和当前数据库名 查表名和列名 最后,激动人心的拿flag

  7. H5系列之canvas

    what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着Ja ...

  8. jQuery 第六章 实例方法 动画

    .show() .hide() .toggle() .fadeIn() .fadeout() .fadeToggle() .fadeTo() .slideDown() .slideUp() .slid ...

  9. 【PUPPETEER】初探之元素获取(二)

    一.涉及的知识点 如何使用css selector 常用元素获取 $ 元素选择 type (api 输入) click (api 点击) 二.学习网址 https://github.com/Googl ...

  10. symfony中,使用原声的sql语句

    1 /** 2 * 数组形式的原生sql 3 */ 4 public function arrayA(array $did) 5 { 6 $statement = $this->getEntit ...