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






// 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 }
}

--------------------------------------------------------------------------------------------

git地址：https://github.com/aicai0/vue3.0-demo.git

如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！