<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    setup() {
      const msg = 'Hello World'
      return { msg }
    }
  }).mount('#app')
</script>

import { createApp, ref } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

node -v
npm -v

// 查看 npm 源
npm config get registry
// 默认是指向 https://registry.npmjs.org/，也就是官方源
 
// 为了提高npm下载速度, 可以给npm换源
// 国内源有很多，我这里用淘宝源吧。毕竟是大公司，会比较稳定
npm config set registry https://registry.npmmirror.com
 
// 再一次查看 npm 源
npm config get registry

# windows系统
npm install yarn -g
npm install pnpm -g
___________________________________
# mac系统
sudo npm install yarn -g
sudo npm install pnpm -g

yarn -v
pnpm -v

<script>
    export default {
      setup() {
        // ...
        const msg = 'Hello Vue3+Vite'
        return {
          msg
        }
      }
    }
</script>
 
<template>
  <h1>{{ msg }}</h1>
</template>
 
<style></style>

<script setup>
    const msg = 'Hello Vue3+Vite'
</script>
 
<template>
    <h1>{{ msg }}</h1>
</template>
 
<style></style>

<script setup>
    // 导入响应式函数
    import { reactive, ref } from 'vue'
    // 字符串
    const msg = ref('Hello Vue3+Vite')
    // 对象
    const obj = reactive({
      name: '小vue',
      age: 9
    })
    // 函数
    function fn() {
      return 100
    }
</script>
<template>
  <!-- 1. 直接放变量 -->
  <h1>{{ msg }}</h1>
  
  <!-- 2. 对象.属性 -->
  <p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
  
  <!-- 3. 三元表达式 -->
  <p>{{ obj.age >= 18 ? '已成年' : '未成年' }}</p>
  
  <!-- 3. 算数运算 -->
  <p>来年我就 {{ obj.age + 1 }} 岁了</p>
  
  <!-- 4. 函数的调用 -->
  <p>fn的返回值是: {{ fn() }}</p>
  
  <!-- 4. 方法的调用 -->
  <p>{{ msg }} 中含有 {{ msg.split(' ').length }} 个单词</p>
</template>

<script setup>
    import { ref } from 'vue'
    const str = ref('<span style="color:red;">Hello Vue3+Vite</span>')
</script>
<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>
<style scoped></style>

<script setup>
    import { ref } from 'vue'
    const url = ref('http://www.baidu.com')
</script>
<template>
  <div>
    <!-- v-bind: 标签属性动态绑定 -->
    <a **v-bind:href="url"** >百度一下</a>
    
    <!-- 简写 -->
    <a **:href="url"** >百度一下</a>
  </div>
</template>

<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参列表)">按钮</button>

<script setup>
    import { ref } from 'vue'
    
    // 响应式数据 计数器
    const count = ref(0)
    
    // 无参函数
    const increase = () => {
      count.value++
    }
    
    // 有参函数
    const add = (n) => {
      count.value +=n
    }
</script>
<template>
  <div>
    <p>{{ count }}</p>
    <!-- 1. 内联语句 -->
    <button v-on:click="count++">+1</button>
    
    <!-- 2. 调用无参函数 -->
    <button v-on:click="increase">+1</button>
    
    <!-- 3. 调用有参函数 -->
    <button v-on:click="add(3)">+3</button>
    <button v-on:click="add(5)">+5</button>
    
    <!-- 4. 简写 @click -->
    <button @click="add(5)">+5</button>
  </div>
</template>

<script setup>
    import { ref } from 'vue'
    // 是否可见
    const visible = ref(true)
    // 是否登录
    const isLogin = ref(true)
    // 成绩
    const mark = ref(100)
</script>
 
<template>
  <!-- v-show -->
  <div class="red" **v-show="visible"** ></div>
  
  <!-- v-if -->
  <div class="green" **v-if="visible"** ></div>
  <hr>
  
  <!-- 双分支的条件渲染 -->
  <div **v-if="isLogin"** >xxx, 欢迎回来</div>
  <div **v-else** >你好, 请登录</div>
  <hr>
  
  <!--
  多分支的条件渲染:
      1. 90及其以上优秀
      2. 70到90之间良好
      3. 其他的差
  -->
  <div **v-if="mark >= 90"** >优秀</div>
  <div **v-else-if="mark >= 70"** >良好</div>
  <div **v-else** >差</div>
</template>
 
<style scoped>
.red, .green {
  width: 200px;
  height: 200px;
}
.red {
  background: red;
}
.green {
  background: green;
}
</style>

<script setup>
    import { ref } from 'vue'
    // 图片列表
    const imgList = [
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
      'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
    ]
    // 当前下标, 默认值 0
    const i = ref(0)
</script>
 
<template>
  <div>
    <button
      v-if="i >= 1"
      @click="i--">
      上一页
    </button>
  </div>
  <img
    :src="imgList[i]"
    alt="img" />
  <div>
    <button
      v-if="i < imgList.length - 1"
      @click="i++">
      下一页
    </button>
  </div>
</template>
 
<style>
#app {
  display: flex;
  width: 500px;
  height: 240px;
}
img {
  width: 240px;
  height: 240px;
}
#app div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<script setup>
    import { ref } from 'vue'
    
    // 是否可见, 默认值 false, 表示不可见
    const visible = ref(false)
</script>
<template>
  <h3>可折叠面板</h3>
  <div class="panel">
    <div class="title">
      <h4>自由与爱情</h4>
      <span
        class="btn"
        @click="visible = !visible">
        {{ visible ? '收起' : '展开' }}
      </span>
    </div>
    <div
      class="container"
      v-show="visible">
      <p>生命诚可贵,</p>
      <p>爱情价更高。</p>
      <p>若为自由故，</p>
      <p>两者皆可抛。</p>
    </div>
  </div>
</template>
 
<style lang="scss">
body {
  background-color: #ccc;
}
#app {
  width: 400px;
  margin: 20px auto;
  padding: 1em 2em 2em;
  border: 4px solid green;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  background-color: #fff;
}
#app h3 {
  text-align: center;
}
.panel {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0 1em;
  }
  .title h4 {
    line-height: 2;
    margin: 0;
  }
  .container {
    border: 1px solid #ccc;
    padding: 0 1em;
  }
  .btn {
    /* 鼠标改成手的形状 */
    cursor: pointer;
  }
}
</style>

<script setup>
    import { ref } from 'vue'
    // 数字数组
    const nums = ref([11, 22, 33, 44])
    
    // 商品列表
    const goodsList = ref([
      { id: 1, name: '篮球', price: 299 },
      { id: 2, name: '足球', price: 99 },
      { id: 3, name: '排球', price: 199 }
    ])
    
    // 准备对象
    const obj = {
      id: 10001,
      name: 'liren',
      age: 9
    }
</script>
<template>
  <div>
    <ul>
      <!-- 遍历数字数组 -->
      <li **v-for="(item, index) in nums"** >{{ item }} => {{ index }}</li>
    </ul>
    
    <div class="goods-list">
      <!-- 遍历对象数组 -->
      <div
        class="goods-item"
        **v-for="item in goodsList"** >
        <p>id = {{ item.id }}</p>
        <p>name = {{ item.name }}</p>
        <p>price = {{ item.price }}</p>
      </div>
      
      <ul>
        <!-- 遍历对象 -->
        <li **v-for="(value, key, index) in obj"** >
          {{ value }} => {{ key }} => {{ index }}
        </li>
      </ul>
      
      <ul>
        <!-- 遍历数字 -->
        <li **v-for="(item, index) in 5"** >{{ item }} => {{ index }}</li>
      </ul>
    </div>
  </div>
</template>
<style scoped></style>

<!-- @format -->
<script setup>
    import { ref } from 'vue'
    // 图书列表
    const bookList = ref([
      { id: 1, name: '《红楼梦》', author: '曹雪芹' },
      { id: 2, name: '《西游记》', author: '吴承恩' },
      { id: 3, name: '《三国演义》', author: '罗贯中' },
      { id: 4, name: '《水浒传》', author: '施耐庵' }
    ])
    
    // 删除函数
    const onDel = (i) => {
      // i: 当前点击的下标
      if (window.confirm('确定删除么?')) {
        // 调用 splice 进行删除
        bookList.value.splice(i, 1)
      }
    }
</script>
 
<template>
  <h3>书架</h3>
  <ul>
    <li 
        **v-for="(item, index) in bookList"** 
        **:key="item.id"** 
    >
      <span>{{ item.name }}</span>
      <span>{{ item.author }}</span>
      <button @click="onDel(index)">删除</button>
    </li>
  </ul>
</template>
 
<style>
#app {
  width: 400px;
  margin: 100px auto;
}
ul {
  list-style: none;
}
ul li {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
</style>

<script setup>
    import { reactive } from 'vue'
    // 登录表单对象
    const loginForm = reactive({
      username: '',
      password: ''
    })
</script>
 
<template>
  <div class="login-box">
    账户：<input type="text" **v-model="loginForm.username"** /><br /><br />
    密码：<input type="password" **v-model="loginForm.password"** /><br /><br />
    <button>登 录</button>
    <button>重 置</button>
  </div>
</template>

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}
:focus {
  outline: 0;
}
.hidden {
  display: none;
}
#app {
  background: #fff;
  margin: 180px 0 40px 0;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#app .header input {
  border: 2px solid rgba(175, 47, 47, 0.8);
  border-radius: 10px;
}
#app .add {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 68px;
  width: 140px;
  text-align: center;
  background-color: rgba(175, 47, 47, 0.8);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0 10px 10px 0;
}
#app input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}
#app input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}
#app input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}
#app h1 {
  position: absolute;
  top: -120px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
  position: relative;
  z-index: 2;
}
.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}
.todo-list li:last-child {
  border-bottom: none;
}
.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 22px;
}
.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none;/* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}
.todo-list li .toggle {
  opacity: 0;
}
.todo-list li .toggle + label {
  /*
  Firefox requires `#` to be escaped -
  https://bugzilla.mozilla.org/show_bug.cgi?id=922433
  IE and Edge requires *everything* to be escaped to render, so we do that
  instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-
  edge/platform/issues/7157459/
  */
  background-image:
    url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%2
    2%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-
    18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20
    fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-
    width%3D%223%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left;
}
.todo-list li .toggle:checked + label {
  background-image:
    url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%2
    2%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-
    18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20
    fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-
    width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2
    027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}
.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}
.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
  color: #af5b5e;
}
.todo-list li .destroy:after {
  content: '×';
}
.todo-list li:hover .destroy {
  display: block;
}
.todo-list li .edit {
  display: none;
}
.todo-list li.editing:last-child {
  margin-bottom: -1px;
}
.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}
.footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
  float: left;
  text-align: left;
}
.todo-count strong {
  font-weight: 300;
}
.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}
.filters li {
  display: inline;
}
.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}
.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.clear-completed:hover {
  text-decoration: underline;
}
.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}
.info p {
  line-height: 1;
}
.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.info a:hover {
  text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }
  .todo-list li .toggle {
    height: 40px;
  }
}
@media (max-width: 430px) {
  .footer {
    height: 50px;
  }
  .filters {
    bottom: 10px;
  }
}

<script setup>
    // 导入 todo 样式
    import './styles/index.css'
    // 代办任务列表
    const todoList = [
      { id: 321, name: '吃饭', finished: false },
      { id: 666, name: '睡觉', finished: true },
      { id: 195, name: '打豆豆', finished: false }
    ]
</script>
 
<template>
  <section clsss="todoapp">
    <header class="header">
      <h1>记事本</h1>
      <input
        placeholder="请输入任务"
        class="new-todo" />
      <button class="add">添加任务</button>
    </header>
    
    <section class="main">
      <ul class="todo-list">
        <li class="todo">
          <div class="view">
            <span class="index">1.</span> <label>吃饭饭</label>
            <button class="destroy"></button>
          </div>
        </li>
      </ul>
    </section>
    
    <footer class="footer">
      <span class="todo-count">合 计: <strong> 0 </strong></span>
      <button class="clear-completed">清空任务</button>
    </footer>
  </section>
</template>