Create a vue project. Tips: Your connection to the default yarn registry seems to be slow. And the use of slot (anonymous/tool) and slot-scope

1. Create a vue project

1. Check whether the node and Taobao images are installed: node -v and cnpm-v

Node installation: On the official website: download | Node.js Chinese website     to download the installation package, and then the installation is successful after the next step.

Install Taobao mirror: npm install -g cnpm --registry=https://registry.npm.taobao.org

2. Install vue

npm install -g @vue/cli
或者
yarn global add @vue/cli

3. Command line to create vue create slot

Translates to: Your connection to the default yarn registry seems to be slow.

That is to say, your current network is very slow. It is recommended that you use https://registry.npmmirror.com to speed up the installation.

 There are also prompts and suggestions to use Taobao source.

 Enter y and press Enter.

The version depends on the actual needs. 

(Self-construction tutorial: Vue self-construction project: Manually select features_March.' blog - CSDN blog )

 Vue3: (Copy from vue to create a project_yarn to create a vue project_Tang Zhuojie's blog-CSDN blog )

vue create 项目名
?  Your connection to the default yarn registry seems to be slow.  
###默认的镜像源下载会很慢，是否切换到淘宝镜像源？
   Use https://registry.npm.taobao.org for faster installation? (Y/n) y  
 
### 请选择预置
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint) //使用vue2.X的模版 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) //使用vue3.0 的模版
  Manually select features  //自定义模版---建议选择项
 
### 检查项目所需的功能：（按<space>选择，<a>切换全部，<i>反转选择，然后<enter>继续）
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel //兼容浏览器--将es6转成es5
 (*) TypeScript //JS超集，主要是类型检查
 ( ) Progressive Web App (PWA) Support //PWA。谷歌提出的桌面应用
 (*) Router //路由
 (*) Vuex //状态管理器
 (*) CSS Pre-processors //css预处理
 (*) Linter / Formatter //代码风格格式化
 ( ) Unit Testing //单元测试
 ( ) E2E Testing //端对端测试
  
 
### 选择一下vue的版本
 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x 
  2.x
 
### 是否使用class风格的组件语法
？Use class-style component syntax? y
 
### 使用Babel与TypeScript一起用于自动检测的填充?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? y
 
### 是否选择用历史(history)的模式来做路由
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
 
### 使用什么css预编译器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus
 
### 选择格式验证工具
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only //只进行报错提醒
  ESLint + Airbnb config  //不严谨模式
  ESLint + Standard config //正常模式
> ESLint + Prettier //严格模式（没强迫症的别选这个，会很痛苦）
 
### 代码检查方式 （按<space>选择，<a>切换全部，<i>反转选择，然后<enter>继续）
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pr
oceed)
>(*) Lint on save //保存时检查
 ( ) Lint and fix on commit (requires Git) //提交时检查
 
### 你更喜欢将Babel, ESLint等的配置放在哪里?
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files //config文件
  In package.json //vue2习惯放在package.json
 
### 是否保存配置在以后的项目中使用
? Save this as a preset for future projects? n
 
### 使用什么进行下载
? Pick the package manager to use when installing dependencies: Yarn
### 我的电脑在某次后没有这个选项了，默认yarn

 2. Slot

1. Anonymous slot

usually only one

<template>
    <div>
        <h3>这是父组件</h3>
        <son>实践slot</son>
    </div>
</template>

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot></slot> 
    </div>
</template>

 2. Named slot

It is to fill in the name of the slot label of the subcomponent

Subassembly:

<template>
  <div class="nav">
      <slot name='left'></slot> 
      <slot name='right'></slot>
  </div>
</template>

Parent component: v-slot: can be abbreviated as # 

<template>
  <div>
      <template #left></template>
      <template v-slot:right></template>
  </div>
</template>

3. Scope slots

(1) Use subcomponents (2) Receive data passed by subcomponents through v-slot

Subcomponent: store a slot with data

<template>
  <div class="child">
    <slot :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

Parent component: Receive the slot data passed by the child component through slot-scope, and fill the content of the slot according to the slot data

<child>
    <template slot-scope="user">
        {
   
   { user.data }}
    </template>
</child>

The effect is: