Vue3.0 Project Creation Guide

Vue3.0 has been released for a long time. As a vue programmer, I can’t learn anymore. I saw some videos about 3.0 a few days ago. Today I will summarize some ways to create a VUe3.0 project, as well as a demo.

Project creation

Vue-next or 3.0 API that you want to experience after vue-CLI creation:

1. Introduce vue-next vue create vue3.0-demo-cli vue add vue-next 2. Vue create vue3.0-demo-cli vue add @vue/composition-api // main.js import import VueCompositionApi from'@vue/composition-api'
 Vue.use(VueCompositionApi);Copy the code

NPM install -g@vue /cli: NPM install -g@vue /cli: NPM install -g@vue /cli:

Vite creates vue3.0 with the following code:

NPM install -g create-vite-app // Global install vite create-vite-app vue-demo-viteCopy the code

Vite creates projects quickly, using the browser’s own import function. No matter how complex the project is, it starts with O(1).

Code experience

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'/ / if there is no import packaging can throw in the code tree shaking / / compisition can disassemble the independent function in separate files vue can only use a mixin will find source And the nuptial import addTodoFac the 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: 'learning', status: false },
        { id: 1, name: 'eat', status: true },
        { id: 2, name: 'sleep', status: false}]}) // Functions can be separated into separate functions //function addTodo () {
    //   state.todoList.push(
    //     { id: state.todoList.length, name: state.newTodo, status: false }
    //   )
    // }
    const { addTodo } = addTodoFac(state)
    functiontoggle (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 }
}

Copy the code