Detailed explanation of vite+ts to quickly build vue3 projects and introduce related features

vite

You Da recommended the vite tool in the Vue 3.0 beta live broadcast, emphasizing: a non-packaged development server for Vue single-page components, which can run the requested vue file directly in the browser

Very novel, this blog uses it to build a vue3 project

Vite is a web development and construction tool for modern browsers that implements on-demand compilation based on the native module system ESModule. Rollup-based packaging in production environments

• Quickly cold start the server
• Instant Hot Module Replacement (HMR)
• True on-demand compilation

node >= 10.16.0

Build

Use vite to build a project

npm init vite-app <project-name>

Install typescript, vue-router@next, axios, eslint-plugin-vue, sass and other related plug-ins

Configuration

vite.config.ts

vite.config.ts is equivalent to vue.config.js in @vue-cli project

I simply configure this:

import path from 'path'

module.exports = {
 alias: {
 '/@/': path.resolve(__dirname, './src')
 },
 optimizeDeps: {
 include: ['lodash']
 },
 proxy: {}
}

Router

Create a new router folder under src and create index.ts in the folder

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
 {
 path: '/',
 name: 'Home',
 component: () => import('/@/views/Home.vue')
 },
 {
 path: '/lifeCycle',
 name: 'lifeCycle',
 component: () => import('/@/views/LifeCycle.vue')
 }
]

export default createRouter({
 history: createWebHistory('/krry/'),
 routes
})

ts types

Create a new tsconfig.json in the project root directory and write relevant configuration

{
 "compilerOptions": {
 ...// Other configuration "paths": {
  "/@/*": [
  "src/*"
  ]
 },
 "lib": [
  "esnext",
  "dom",
  "dom.iterable",
  "scripthost"
 ]
 },
 "include": [
 "src/**/*.ts",
 "src/**/*.tsx",
 "src/**/*.vue",
 "src/types/images.d.ts",
 "tests/**/*.ts",
 "tests/**/*.tsx"
 ],
 "exclude": [
 "node_modules"
 ]
}

Create a new types folder in the src directory, which needs to configure the ts type

shims-vue.d.ts

declare module '*.vue' {}

images.d.ts

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

main.ts

import { createApp } from 'vue'
import router from '/@/router'

import App from '/@/App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

Then you can happily write code

vue3 knowledge

setup

In Vue3, all APIs are integrated with the setup function; it is executed only once, before the lifecycle function, so the current instance this cannot be obtained in the setup function, and this cannot be used to call the methods defined in the Vue2 writing method.

It will accept two parameters: props, context

// props - properties received by the component context - context setup(props, context) {
 return {
 //Data and methods to be bound}
}

props

The props in the setup function are responsive and will be updated when a new prop is passed in. However, because the props are responsive, ES6 destructuring cannot be used as it will eliminate the responsiveness of the prop.

If you need to destructure the prop, you can do this safely by using toRefs in the setup function

import { toRefs } from 'vue'

setup(props) {
 const { title } = toRefs(props)
 console.log(title.value)
}

context

The context exposes three component properties: { attrs, slots, emit }
It is a normal JavaScript object and is not reactive, which means you can safely use ES6 destructuring on the context.

life cycle

Access component lifecycle hooks by prefixing them with "on"

Because setup runs around the beforeCreate and created lifecycle hooks, you don't need to define them explicitly. In other words, any code you write in these two hooks should be written directly in the setup function.

setup() {
 onMounted(() => {
 console.log('component mounted')
 })

 onUnmounted(() => {
 console.log('component uninstall')
 })

 onUpdated(() => {
 console.log('component update')
 })

 onBeforeUpdate(() => {
 console.log('Component will be updated')
 })

 onActivated(() => {
 console.log('keepAlive component activated')
 })

 onDeactivated(() => {
 console.log('keepAlive component is not activated')
 })

 return {}
}

ref、reactive

ref can wrap a common value into responsive data, which is limited to simple values. Internally, the value is wrapped into an object, and then processed through defineProperty. When getting and setting the value, you need to use .value to set it. You can use ref to get the reference of the component, instead of writing this.$refs.

reactive processes complex data in a responsive manner. Its return value is a proxy object. When returned in the setup function, the proxy object can be structured using toRefs for easy use in the template.

Use as follows:

<template>
 <div>
 <div>
  <ul v-for="ele in eleList" :key="ele.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addEle">Add</button>
 </div>
 <div>
  <ul v-for="ele in todoList" :key="ele.id">
  <li>{{ ele.name }}</li>
  </ul>
  <button @click="addTodo">Add</button>
 </div>
 </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'

export default {
 setup() {
 // ref
 const eleList = ref([])
 function addEle() {
  let len ​​= eleList.value.length
  eleList.value.push({
  id:len,
  name: 'ref increment' + len
  })
 }

 // reactive
 const dataObj = reactive({
  todoList: []
 })
 function addTodo() {
  let len ​​= dataObj.todoList.length
  dataObj.todoList.push({
  id:len,
  name: 'reactive increment' + len
  })
 }

 return {
  eleList,
  addEle,
  addTodo,
  ...toRefs(dataObj)
 }
 }
}
</script>

computed、watch

// computed
let sum = computed(() => dataObj.todoList.length + eleList.value.length)
console.log('setup references computed to.value:' + sum.value)

//watch
watch(
 eleList,
 (curVal, oldVal) => {
 console.log('Listener:', curVal, oldVal)
 },
 {
 deep: true
 }
)

watchEffect

Responsively track the responsive data referenced in the function, and re-execute the function when the responsive data changes

const count = ref(0)
// When the value of count is modified, the callback will be executed const stop = watchEffect(() => console.log(count.value))

// Stop listening stop()

You can also stop monitoring. watchEffect returns a function that can be executed to stop monitoring

Same as vue2:

const unwatch = this.$watch('say', curVal => {})

// Stop listening unwatch()

useRoute, useRouter

import {useRoute, useRouter} from 'vue-router'

const route = useRoute() // equivalent to this.$route in vue2
const router = useRouter() // equivalent to this.$router in vue2

route is used to obtain the current route data
router is used for routing jumps

vuex

When using useStore to get the store object from vuex, you must use computed to wrap it so that the state in vuex can be modified before it can be responded to in the page.

import { useStore } from 'vuex'

setup(){
 const store = useStore() // equivalent to this.$store in vue2
 store.dispatch() // dispatch asynchronous tasks through the store object store.commit() // commit to modify store data let category = computed(() => store.state.home.currentCagegory
 return { category }
}

This is the end of this article about vite+ts quickly building a vue3 project and introducing related features. For more relevant vite+ts building vue3 content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!