新开个项目,小项目,小。顺手就用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. mysql参数总结

    1.innodb_old_blocks_pct 确定modpoint位置,默认37,(3/8=37%)可以通过这个调整young与old比. innodb_old_blocks_time:当有大的查询 ...

  2. linux中/etc/passwd和/etc/shadow文件说明

    /etc/passwd是用来存储登陆用户信息: [root@localhost test]# cat /etc/passwd root:x:0:0:root:/root:/bin/bash bin:x ...

  3. ceph的pg的分布的快速查看

    前言 本篇的内容实际上是另外一篇文章的字篇章,在另外一篇文章当中,将会对crush的分布的调整的做一次总结,用比较简单的方式来展示各种crush的区别 在做这个工作过程中,为了更好的能展示出效果,就有 ...

  4. 通过shodan搜索相同favicon.ico的网站

    0x01 根据favicon.ico生成hash python2,想改python3折腾了半天不得 import mmh3 import requests response = requests.ge ...

  5. 仅需几步,EasyRecovery就能恢复RAID数据

    RAID是什么?RAID是具有冗余能力的磁盘阵列,简单的来说就是把相同的数据存储在多个硬盘的不同的地方. 在了解了RAID之后就会知道,RAID中的数据也是有可能丢失的,虽然RAID数据丢失会引发一系 ...

  6. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  7. leetcode151. 翻转字符串里的单词

    给定一个字符串,逐个翻转字符串中的每个单词. 示例 1:输入: "the sky is blue"输出: "blue is sky the"示例 2:输入: & ...

  8. Java8 Stream:2万字20个实例,玩转集合的筛选、归约、分组、聚合

    点波关注不迷路,一键三连好运连连! 先贴上几个案例,水平高超的同学可以挑战一下: 从员工集合中筛选出salary大于8000的员工,并放置到新的集合里. 统计员工的最高薪资.平均薪资.薪资之和. 将员 ...

  9. 使用logisim搭建单周期CPU与添加指令

    使用logisim搭建单周期CPU与添加指令 搭建 总设计 借用高老板的图,我们只需要分别做出PC.NPC.IM.RF.EXT.ALU.DM.Controller模块即可,再按图连线,最后进行控制信号 ...

  10. 蓝桥杯-RP大冒险-未解决

    RP大冒险 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号. 输出格式 一个0~9的数. 样例输入 0 样例输出 X {当且仅当输出仅有一个数X且X为0~9的 ...