新开个项目,小项目,小。顺手就用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. gdb调试子进程

    gdb默认情况下,父进程fork一个子进程,gdb只会继续调试父进程而不会管子进程的运行. 在一部分系统中(基于2.6内核的CentOS,支持follow-fork和detach-on-fork模式) ...

  2. linux服务器远程网络开机(wake on lan)

    通过网络可以远程开关机,某些时候比较方便管理机器 检查服务器是否支持远程网络开机 [root@lab5101 ~]# ethtool eth0 Settings for eth0: Supported ...

  3. Bad magic number ImportError in python

    是源码编译里面版本不对,删除掉源码pyc然后重新编译就可以了 find .-name '*.pyc'-delete python -m compileall . 更新历史 why when 创建 20 ...

  4. Ubuntu 12.10设置root用户登录图形界面

    Ubuntu 12.04默认是不允许root登录的,在登录窗口只能看到普通用户和访客登录.以普通身份登陆Ubuntu后我们需要做一些修改,普通用户登录后,修改系统配置文件需要切换到超级用户模式,在终端 ...

  5. JVM中的常量池详解

    在Java的内存分配中,总共3种常量池: 转发链接:https://blog.csdn.net/zm13007310400/article/details/77534349 1.字符串常量池(Stri ...

  6. C# 9 record 并非简单属性 POCO 的语法糖

    C# 9 record 并非简单属性 POCO 的语法糖 最近升级专案到大统一 .NET 5 并使用 C#9 语法尝试改写套件,发现之前以为 record 只是简单属性 POCO 的简化语法糖的认知是 ...

  7. 深度分析ReentrantLock源码及AQS源码,从入门到入坟,建议先收藏!

    一.ReentrantLock与AQS简介 在Java5.0之前,在协调对共享对象的访问时可以使用的机制只有synchronized和volatile.Java5.0增加了一种新的机制:Reentra ...

  8. CorelDRAW快速去除图片背景颜色

    当我们需要从网上借助一些素材图片在CorelDRAW中运用时,往往需要去掉图片的背景颜色.本文小编分享CDR中如何快速去除图片背景颜色的方法,通过此方法可以做简单的照片抠图.合成. 1. 打开Core ...

  9. 头秃了,使用@AutoConfigureBefore指定配置类顺序竟没生效?

    持续原创输出,点击上方蓝字关注我 前言 日常工作中对于Spring Boot 提供的一些启动器可能已经足够使用了,但是不可避免的需要自定义启动器,比如整合一个陌生的组件,也想要达到开箱即用的效果. 在 ...

  10. python中正则表达式

    正则表达式是一种通用的字符串匹配技术,是不会因为编程语言不一样而发生变化的如果想查找对应规则的字符串,就可以用正则表达式python中要使用正则表达式需使用re模块,它是正则表达式在python中的封 ...