学习vue 3 之前的准备工作,持续更新中.......

197 阅读2分钟

yarn的下载

  1. 全局下载安装yarn
npm install -g yarn
  1. 更新至最新版本
yarn set version latest
  1. 查看yarn的版本
yarn -v
yarn --version
  1. 查看当前yarn使用的镜像
yarn config get registry
  1. 切换成淘宝的镜像
yarn config set registry https://registry.npm.taobao.org/
  1. 安装yrm,是管理镜像的工具,可以列出使用的镜像有哪些,方便
npm install -g yrm
  1. 列出镜像
yrm ls
  1. 切换镜像
yrm use taobao
  1. 测试镜像的速度
yrm test taobao
  1. yarn的基础指令
    1. 访问命令列表
    yarn help
    
    1. 初始化项目
    yarn init
    
    1. 安装项目依赖
    yarn
    yarn install
    
  2. 全局安装插件
yarn add -g <Module Name>
  1. 生产环境
yarn add <Module Name>
  1. 开发环境
yarn add <Module Name> –dev
  1. 更新所有软件包
yarn upgrade
  1. 更新指定的软件包的版本
yarn update <Module Name>
  1. 卸载软件包
yarn remove  -g <Module Name>
  1. 删除项目中的软件包
yarn remove  <Module Name>

VScode的插件配置

下载最先支持vue3.x 语法的插件

Vue Language Features (Volar)

如果使用了这个插件,需要将之前我们写vue2.x 语法用到的插件(Vetur)需要禁用掉,去启用新下载的插件,之所以去使用这个插件是因为之前的插件会报错,具体不是代码的错误,他会在 VScode 里面,将某一个代码片段标红,实际上不是代码书写错误,而是这个插件编译导致的,他不能去识别新的语法,所以使用 Volar 插件,并且他还有好多好用的小功能,可以一键转换,将vue2 的语法转换成vue3 的语法

构建工具的选择(Vite / Vue/cli)

  1. 在vue2的时候,我们使用vue/cli去创建vue2项目,但如果你想使用vue/cli去创建一个新的vue3的项目,最好是将vue/cli的版本升级一下,升级到4的版本。

  2. vite与vue/cli,同是vue的作者开发的两款工具,后者,更偏向打包,他的出现和VUE的关系,不是很大,他更像是一个类似webpack的一个打包工具,而且在使用vite的时候,无论是构建项目的速度,以及项目的运行,都是很快的,所以我自己还是比较倾向使用 Vite,这个工具去创建一个vue3的项目

  3. 运行项目指令的区别

vue/cli
npm run serve // 运行项目

vite
npm run dev // 运行项目 
  1. Vite vs Vue/cli 构建项目

    • Vue/vli构建项目
    vue create < name >
    
    * Vite创建项目
    
    npm init vite@lates
    

Snipaste_2021-11-30_18-43-03.png Snipaste_2021-09-27_23-50-20.png