vite官方文档

0. 使用vite初始化一个项目(npm、yarn)

npm init vite@latest

yarn create vite
//或者使用pnpm
pnpm create vite

2. y继续，然后给项目起个名字，这里我的名字是vite-app
3. 注意：在哪里打开终端，你的项目就建立在哪里

安装依赖：npm install
依赖安装好了之后就会放到node_modules这个文件夹下
启动项目：npm run dev

第二天之后启动项目可能会报错，说你没有权限

解决方法在下方链接里：

blog.csdn.net/weixin_3786…

package json 命令解析

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

安装Vue cli脚手架

安装：npm install @vue/cli -g
检查安装：Vue -V

使用脚手架

vue create project(命令行)

Vite 目录

public 下面的不会被编译 可以存放静态资源

assets 下面可以存放可编译的静态资源

components 下面用来存放我们的组件

App.vue 是全局组件

main ts 全局的 ts 文件

index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是 enrty input 是一个 js 文件 而 Vite 的入口文件是一个 html 文件，他刚开始不会编译这些 js 文件 只有当你用到的时候 如 script src="xxxxx.js" 会发起一个请求被 vite 拦截这时候才会解析 js 文件）

vite config ts 这是 vite 的配置文件具体配置项

VsCode Vue3 插件推荐 Vue Language Features (Volar)

SFC 语法规范

*.vue` 件都由三种类型的顶层语法块所组成：`<template>`、`<script>`、`<style>

<template>

• 每个 *.vue 文件最多可同时包含一个顶层 <template> 块。
• 其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。

---

<script>

• 每一个 *.vue 文件可以有多个 <script> 块
• 该脚本将作为 ES Module 来执行。
• 其默认导出的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是 defineComponent 的返回值。

---

<script setup>

• 每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)
• 该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 文档。

---

<style>

• 一个 *.vue 文件可以包含多个 <style> 标签。
• <style> 标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混

NVM 介绍

NVM 全称 node.js version management ，专门针对 node 版本进行管理的工具，通过它可以安装和切换不同版本的 node.js

GitHub地址:github.com/coreybutler…

Nvm 常用命令操作

nvm list	查看现在所有安装的 node 版本
nvm list available	查看 nodejs 官方的所有版本
nvm install	（版本号）下载对应的 node 版本号
nvm use	切换 node 版本

nrm 介绍

nrm 是一个 npm 源管理器，允许你快速地在 npm 源间切换。(其实就是镜像，你可以安淘宝镜像啥的)

0. 安装

   npm install -g nrm
   

1. npm ls 查看可选源 星号代表当前使用源

2. nrm use （源）切换源

3. nrm add （名称）（源）

4. 测试速度 nrm test npm

替代nrm包的新一代包：xmzs

没错，这个xmzs就是包名，由此教程的作者小满zs编写的包。

在正式介绍这个包之前，我们来将他与nrm这个包进行一个对比：xmzs 是一个基于 Node.js 的命令行工具，它提供了与 nrm 类似的功能，可以方便地切换不同的 npm registry。虽然它和 nrm 有一些相似之处，但是两者有一些不同之处：

0. 功能不完全相同：xmzs 和 nrm 提供的功能略有不同。nrm 除了切换 registry 外，还提供了列出当前可用 registry 和测试 registry 响应时间的功能，而 xmzs 提供了批量修改 registry、查看当前 registry 等功能。
1. 社区支持：nrm 是一个较为流行的开源工具，它已经得到了广泛的社区支持，并且在维护更新方面也比较活跃。xmzs 相对来说较为新(因为刚写的)，目前社区支持还不如 nrm 火热。
2. 使用体验：xmzs 相对来说使用体验较为简单和便捷(当你安装下来的时候，会直接附带了各种镜像源能够直接切换，切换的手感也更加丝滑)，但是 nrm 在命令行交互和使用习惯方面已经比较成熟，也能够满足大多数用户的需求。

• 地址：xmzs - npm (npmjs.com)

• 使用说明：(他的命令是mmp，一个很社会的命令)

  0. 安装：

     npm i xmzs -g
     

  1. mmp ls 查看目前源：

     npm	registry.npmjs.org/
     yarn	registry.yarnpkg.com/
     tencent	mirrors.cloud.tencent.com/npm/
     cnpm	r.cnpmjs.org/
     taobao	registry.npmmirror.com/
     npmMirror	skimdb.npmjs.com/registry/

  2. 用法详解表格：

     mmp命令集	作用
     mmp use	切换源：选择你要切换的源
     mmp current	查看当前源：当前源: npm
     mmp add	添加源：1.输入添加的地址 2.输入源地址
     mmp ping	测试源：? 请选择镜像 cnpm 响应时长: 1635ms
     mmp delete	删除自定义源：add添加的源都可以删除
     mmp rename	删除自定义源：add添加的源都可以删除
     mmp edit	编辑自定义镜像地址

  3. 下载动画(MMP图效)：

     npm版本6.14.15能够看到动画，如果升级到7.1.2的npm及以上就无法看到MMP动画的显示