vue3-beta0.1

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

• eslint语法纠错
  • npm run lint --fix

git

• git init
• touch README.md
• touch README.md
• git add README.md

A、初始化gitee仓库

• 创建名称
  • vue3
• 去掉readme文件初始化这个仓库的选项
• 建好的仓库地址
  • xxx/vue3.git
• 用git建立远程连接：
  • git remote add origin xxx/vue3.git
• 检查文件状态
  • git status
• 将全部文件放到暂存区(空格+.)
  • git add .
• 将全部文件提交到本地仓库
  • git commit -m "add file"
• 将全部文件推送到远程仓库
  • git push -u origin master
  • 第一次提交，输入gitee的用户名和密码

B、开始项目子功能

• 在每次写代码之前都必须保证工作目录干净
  • git status
• 在开发一个新功能时，都需要在git中创建一个新分支
• 新建分支同时切换到新建分支上（-b是branch缩写）
  • git checkout -b login
• 可以查看当前所有分支的列表【打星号的是当前所在分支】
  • git branch

C.中途暂停项目子功能

• 查看修改过的与新增的文件内容
  • git status
• 将所有文件添加到暂存区
  • git add .
• 将所有代码提交到本地仓库
  • git commit -m "添加登录功能以及/home的基本结构"
• 查看分支【所有代码都被提交到了login分支】
  • git branch
• 下次继续工作，先查看所在分支，若不是则切换回工作分支即可
  • git branch

D、结束项目子功能

• 将login分支代码合并到master主分支
  • 先切换到master
  • git checkout master
  • 在master分支进行代码合并
  • git merge login
• 1.将本地的master推送到远端的码云
  • git push
• 2.推送本地的子分支到码云
  • 先切换到子分支
  • git checkout 分支名
  • 然后推送到码云
  • git push -u origin 远端分支名

vue3

• 先升级到vue-cli4.3.1
  • npm i -g @vue/cli
• 再升级vue3.0.0-beta.1（beta版）
  • cd vue3
  • vue add vue-next

A、vue-cli4.3.1

• vue create vue3
• 创建步骤省略

B、清理App.vue

• cd vue3
• npm run serve【启动】

或者

• vue ui【启动】

vue3新特性

main.js的变动

import { createApp } from 'vue'
import App from './App.vue'

//把app的容器挂载到App
createApp(App).mount('#app')

实例

• 添加axios依赖
  • vue add axios

App.vue

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>名字：{{ state.name }} tel:{{ state.tel }}</h1>
      <table  border="1">
        <tr>
          <th>名字</th>
          <th>邮件</th>
        </tr>
        <div v-for="(user, index) in state.users" :key="index">
          <tr>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
          </tr>
        </div>
      </table>
      <button @click="fetchData()">获取数据</button>
  </div>
</template>

<script>
import { reactive, computed, onMounted } from 'vue'
import axios from 'axios'

export default {
  setup () {
    const state = reactive({
      name: 'Lewis',
      tel: '1234',
      users: []
    })

    onMounted(() => {
      // fetchData()
    })

    function fetchData () {
      axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
        console.log(res.data)
        state.users = res.data
      })
    }
    return {
      state,
      computed,
      fetchData
    }
  }
}
</script>