vue3.0项目创建指南

        vue3.0已经发布很久了，作为一个靠vue吃饭的程序员，真心表示学不动了。。。前几天看了一些关于3.0的视频，今天总结一下vue3.0项目创建的几种方式，以及demo。

        项目创建

        第一种：vue-cli创建之后引入vue-next或者3.0中想要体验的api，代码如下：

1.直接引入vue-next
  vue create vue3.0-demo-cli
  vue add vue-next

2.引入3.0的composition-api 使用这一部分功能
 vue create vue3.0-demo-cli
 vue add @vue/composition-api  
 // main.js 中引入
 import VueCompositionApi from  '@vue/composition-api'
 Vue.use(VueCompositionApi);

    直接引入vue-next，要注意vue-cli的版本，如果版本低于4.0则要升级vue脚手架：npm install -g @vue/cli，否则项目运行时会报错。

      第二种：Vite 创建vue3.0，代码如下：

npm install -g create-vite-app  // 全局安装vite
create-vite-app vue-demo-vite

      vite创建项目飞快，嗯，尤大很看好，利用了浏览器自带的import功能，无论项目多复杂，启动都是O(1)

    代码体验

HelloWorld.vue
<template>
  <div class="hello">
    {{top}}
    <input :class="{fixedinput:top>10}"  
           type="text" 
           v-model="state.newTodo" @keyup.enter="addTodo">
     <div>
      <span>{{nums}}</span> <span @click="add" >点击</span>
    </div>
    <ul>
      <li :class="{done:todo.status}" 
          v-for="(todo,index) in state.todoList" 
         :key="todo.id" 
         @click="toggle(index)">
      {{todo.name}}</li>
    </ul>
    <div>
      完成事件个数：{{remain}}
    </div>
  </div>
</template>
<script>
import { ref, reactive, computed } from 'vue'
// 如果没有import 打包可以把代码丢掉 tree-shaking
// compisition 可以拆开独立函数放在独立文件 vue只能用mixin 会找不到源头 以及重名
import addTodoFac from './hello_function'
// 拆分复杂逻辑import useScrollFac from './hello_function_userScroll'
export default {
  setup () {
    const nums = ref(0)
    const add = () => {
      nums.value += 1
    }
    const state = reactive({
      newTodo: '',
      todoList: [
        { id: 0, name: '学习', status: false },
        { id: 1, name: '吃饭', status: true },
        { id: 2, name: '睡觉', status: false }
      ]
    })
    // 函数可以抽离出去 拆包  拆成独立函数
    // function addTodo () {
    //   state.todoList.push(
    //     { id: state.todoList.length, name: state.newTodo, status: false }
    //   )
    // }
    const { addTodo } = addTodoFac(state)
    function toggle (index) {
      state.todoList[index].status = !state.todoList[index].status
    }
    const { top } = useScrollFac()
    console.log(top)
    const remain = computed(
      () => state.todoList.filter(todo => todo.status).length
    ) 
    return {
      nums,
      add,
      state,
      addTodo,
      remain,
      toggle,
      top 
   }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 20px 10px;
}
li.done{
  text-decoration: line-through;
}
.fixedinput{
  position:fixed;
  top:10px;
  left:45%;
}
a {
  color: #42b983;
}
</style>


// hello_function_userScroll.js
import { ref, onMounted, onUnmounted } from 'vue'
export default function useScroll () {
  const top = ref(0)  function upDate (e) {
    top.value = window.scrollY
  }
  onMounted(
    () => {
      window.addEventListener('scroll', upDate)
    }
  )
  onUnmounted(
    () => {
      window.removeEventListener('scroll', upDate)
    }
  )
  return { top }
}

// hello_function.js
export default function (state) {
  function addTodo () {
    state.todoList.push(
      { id: state.todoList.length, name: state.newTodo, status: false }
    ) 
 }
  return { addTodo }
}